如何在Vue 3中使用v-for中的 prop 使用v-model

vuktfyat  于 2022-12-14  发布在  Vue.js
关注(0)|答案(1)|浏览(317)

我想在v-for中使用带有 prop 的v-model。我在使用计算变量之前使用了带有 prop 的v-model,但不知道如何在v-for中使用。
这是我的代码:

<script setup>
const fieldValue = computed({
  get() {
    return props.modelValue;
  },
  set(value) {
    emits('update:modelValue', value);
  },
});
</script>
<template>
  <Mentionable
    v-for="(field, index) in props.data.placeholder"
    :key="index"
    :keys="['#']"
    :items="props.data.items"
  >
    <textarea
      v-model="fieldValue"
      :disabled="!props.data.loaded"
      :placeholder="field.placeholder"
      :maxlength="props.maxLength"
      :required="props.required"
    />
  </Mentionable>
</template>

注:Mentionablevue-mention库中的组件。

mccptt67

mccptt671#

使用model-valueupdate:model-value事件代替v-model
如果组件不提供model-valueupdate:model-value事件,则必须有prop和event可以做同样的事情。
例如,来自Ant Design VueAInput提供了价值主张和变更事件。

<script setup name="Demo">
  const {ref} from 'vue'
  const arrayInputs = ref(['1', 'test', '3'])
  function change(i, event) {
    arrayInputs.value[i] = event.target.value
  }
</script>

<template>
  <div class="vue-component">
    <h2>ant-design-vue</h2>
    <template v-for="(item, index) in arrayInputs" :key="index">
      <!-- the index is important -->
      <AInput :value="item" @change="event => change(index, event)" />
    </template>
    <div>{{ arrayInputs }}</div>
  </div>
</template>

相关问题