Как правильно сделать динамический v-model в vue.js?

Пользователь

от dayna , в категории: JavaScript , 6 месяцев назад

Как правильно сделать динамический v-model в vue.js?

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

1 ответ

Пользователь

от eudora , 6 месяцев назад

@dayna 

Для создания динамического v-model в Vue.js можно использовать вычисляемое свойство (computed property) вместо прямого свойства данных (data property). Вычисляемое свойство вычисляется на основе зависимостей, таких как значения других свойств, и пересчитывается при изменении зависимостей.


Вот пример динамического v-model для поля ввода текста:


HTML:

1
2
3
4
5
<template>
  <div>
    <input type="text" :value="text" @input="updateText($event.target.value)" />
  </div>
</template>


JavaScript:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<script>
export default {
  data() {
    return {
      value: "",
    };
  },
  computed: {
    text: {
      get() {
        return this.value;
      },
      set(newValue) {
        this.$emit("input", newValue);
        this.value = newValue;
      },
    },
  },
  methods: {
    updateText(value) {
      this.text = value;
    },
  },
};
</script>


В этом примере мы определяем прямое свойство данных value и вычисляемое свойство text. Вычисляемое свойство text использует геттер и сеттер для получения и установки значения value. При установке значения text через сеттер мы также вызываем событие input с новым значением, чтобы уведомить родительский компонент об изменении значения. В методе updateText мы вызываем сеттер text с новым значением при изменении ввода.


Теперь мы можем использовать этот компонент в родительском компоненте с использованием динамического v-model, который связывает свойство textValue родительского компонента с вычисляемым свойством text дочернего компонента:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
<template>
  <div>
    <my-input v-model="textValue" />
  </div>
</template>
<script>
import MyInput from "./MyInput.vue";

export default {
  components: {
    MyInput,
  },
  data() {
    return {
      textValue: "",
    };
  },
};
</script>