应用于 v-model 的更改不会触发可写的计算方法

Question

我正在使用

vuejs3

和

options api

如下面发布的代码所示，vue 组件

RadioBtnTimeSeriesAgo

有一个单选按钮作为输入。

RadioBtnTimeSeriesAgo

是一个子组件。我通过

paretn component

在父组件中进行绑定，如下面第

v-model

部分所示。

parent component

有一个

button

，一旦点击方法

onDigitizePolygon

就会被调用，并导致父组件中

vModelTimeSeriesAgo

的值发生变化，因此，我希望

v-model

能够反映' RadioBtnTimeSeriesAgo.vu' 相应。

但是发生的情况是，尽管父组件中的

vModelTimeSeriesAgo

发生了变化，但永远不会触发子组件

RadioBtnTimeSeriesAgo

中的任何更改。可写的计算方法从未执行过。

请让我知道为什么会发生这种情况，如果我错误地创建了

v-model

，请告诉我如何正确制作它。

RadioBtnTimeSeriesAgo.vue：

<template>
    <cds-radio>
        <input
            type="radio"
            :value="vModelTimeSeriesAgo"
            @input="$emit('update:vModelTimeSeriesAgo', $event.target.value)"
            @change="onTimeSeriesAgoChanged()"/>
    </cds-radio>
</template>

<script>
import { NDVIGuiConstants } from './resources/NDVIComparisonGuiConstants.js';
export default {
    name: 'RadioBtnTimeSeriesAgo',
    date() {
        return {};
    },
    components: {},
    props: {
        tempTextTimeSeriesAgo: {
            type: String,
            default: NDVIGuiConstants.CONST_RADIO_BUTTON_TIME_SERIES_AGO.description,
        },
    },
    emits: ['update:vModelTimeSeriesAgo'],
    computed: {
        vModelTimeSeriesAgo: {
            get() {
                console.log('get.vModelTimeSeriesAgo:', this.vModelTimeSeriesAgo);
                return this.vModelTimeSeriesAgo;
            },
            set(value) {
                console.log('set.vModelTimeSeriesAgo:', value);
                this.$emit('update:vModelTimeSeriesAgo', value);
            },
        },
    },
    methods: {
        onTimeSeriesAgoChanged() {
            console.log('onTimeSeriesAgoChanged');
        },
    },
};
</script>

父组件

<template>
    <button @click="onDigitizePolygon()"></button>
    <RadioBtnTimeSeriesAgo v-model:vModelTimeSeriesAgo="vModelTimeSeriesAgo"></RadioBtnTimeSeriesAgo>
</template>

<script>
    let vModelTimeSeriesAgo = ref('');
    export default  {
    data() {
        return {
            vModelTimeSeriesAgo,
        }
    },
    components: {
        RadioBtnTimeSeriesAgo,
    },
    methods: {
        onDigitizePolygon() {
            vModelTimeSeriesAgo.value += '#';
    },
    immediate: true,
},
</script>

Answer 1

TL，博士；您尚未将

vModelTimeSeriesAgo

声明为

prop

！

---

为了使

v-model:something="whatever"

工作，您 需要将

something

声明为

prop

并在子组件中发出。

家长

<some-child v-model:something="whatever" />

某个孩子

export default {
  props: ['something'], 
  emits: ['update:something']
}

<input :value="something" @input="$emit('update:something', $event.target.value)" />

或者，您可以在 child 中定义本地计算：

import { emit } from 'vue'
// ...
computed: {
  localSomething: {
    get() { return this.something },
    set(val) { emit('update:something', val)
  }
}

或

setup(props, { emit }) {
  const localSomething = computed({
    get() { return props.something },
    set(val) { emit('update:something', val) }
  })
  return { localSomething }
}

并与

v-model

一起使用:

<input v-model="localSomething" />

现在更改子组件中的输入值将更新父组件

whatever

。