Двусторонняя привязка данных формы в API композиции vue 3

Я начинаю свой переход с API-интерфейса опций на API-интерфейс Compositon в Vue.

И у меня есть следующий блок кода, где я пытаюсь реализовать двухстороннюю привязку.

Я использую библиотеку ant-design-vue для ввода слайдера. И пытаюсь привязать значение ползунка к полю ввода.

<template>
  <div>
    <a-row>
      <a-col :span = "12">
        <a-slider v-model = "inputValue1" :min = "1" :max = "20" />
      </a-col>
      <a-col :span = "4">
        <a-input-number
          v-model = "inputValue1"
          :min = "1"
          :max = "20"
          style = "marginleft: 16px"
        />
      </a-col>
    </a-row>
  </div>
</template>
<script>
import { ref } from "vue";
export default {
  setup() {
    let inputValue1 = ref(8);
    return { inputValue1 };
  },
};
</script>

С приведенным выше кодом значение inputValue1 не меняется при проверке в инструменте vue dev.

Как мне работать с двусторонней привязкой в API-интерфейсе vue 3?

Ссылка на песочницу: https://stackblitz.com/edit/vue-pchhub?file=src%2FApp.vue

javascript vue.js vuejs3 vue-composition-api

20.03.2022 16:16

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Похоже, вам нужно использовать v-model:value = "...", чтобы это сработало.

<template>
  <div>
    <a-row>
      <a-col :span = "12">
        <a-slider v-model:value = "inputValue1" :min = "1" :max = "20" />
      </a-col>
      <a-col :span = "4">
        <a-input-number
          v-model:value = "inputValue1"
          :min = "1"
          :max = "20"
          style = "marginleft: 16px"
        />
      </a-col>
    </a-row>
  </div>
</template>
<script>
import { ref } from "vue";
export default {
  setup() {
    let inputValue1 = ref(8);
    return { inputValue1 };
  },
};
</script>

20.03.2022 16:36

Другие вопросы по теме

Может ли компонент иметь собственное состояние?

Vue 3 с Quasar — функции с параметрами — TypeError: невозможно прочитать свойства неопределенного

Добавьте новую строку для возврата внутри метода

NuxtJS и шина событий

Как использовать vue.js для отображения массива API в виде загрузочных карт с использованием axios

Реактивность примитивов с использованием реактивности в Vue 3

Как мне инициализировать firebase в компоненте Vue3?

Получить значение излучения из определенного элемента V-for

Вычисляемое свойство не обновляется в производственной сборке

Не удалось отправить почтовый запрос с помощью конденсатора (отлично работает с обычной веб-страницы)

Двусторонняя привязка данных формы в API композиции vue 3

Ответы 1

Другие вопросы по теме

Похожие вопросы