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

vuktfyat 于 2022-12-14 发布在 Vue.js

关注(0)|答案(1)|浏览(298)

我想在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>

注：Mentionable是vue-mention库中的组件。

vue.js

来源：https://stackoverflow.com/questions/73282804/how-to-use-v-model-using-props-in-v-for-in-vue-3

1条答案

按热度按时间

mccptt671#

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

<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>

赞(0）回复(0）举报 2022-12-14

我来回答

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

1条答案

相关问题

热门标签

最新问答