如何初始化单选按钮的可写计算属性

Question

我正在使用

vuejs3

和

options api

如下面发布的代码所示，我有两个

<input>

，并且我通过

v-model

进行绑定。

当我运行应用程序时，计算属性的

get()

的日志语句最初返回

undefined

，因此，最初没有选择任何单选按钮。 我的问题是，将初始值设置为

vModelTimeSeriesAgo

和

vModelEpochAgo

的最佳方法是什么，请问如何设置？

template.html:

<template>
    <cds-radio-group name="interaction" layout="vertical" cds-layout="p-y:lg"> -->
        <cds-radio>
            <label>{{ tempTextTimeSeriesAgo }}</label>
            <input
                type="radio"
                :value="vModelTimeSeriesAgo"
                @input="$emit('update:vModelTimeSeriesAgo', $event.target.value)"
                @change="onTimeSeriesAgoChanged()"/>
        </cds-radio>

        <cds-radio>
            <label>{{ tempTextEpochAgo }}</label>
            <input
                type="radio"
                :value="vModelEpochAgo"
                @input="$emit('update:vModelEpochAgo', $event.target.value)"
                @change="onEpochAgoChanged()"/>
        </cds-radio>
    </cds-radio-group>
</template>



export default {
name: 'NDVIComparisonGUI',
    date() {
        return {};
    },
    components: {},
    props: {},
    emits: ['update:vModelTimeSeriesAgo', 'update:vModelEpochAgo'],
    computed: {
        vModelTimeSeriesAgo: {
            get() {
                console.log('get.vModelTimeSeriesAgo:', this.vModelTimeSeriesAgo);
                return this.vModelTimeSeriesAgo;
            },
            set(value) {
                console.log('set.vModelTimeSeriesAgo:', value);
                this.$emit('update:vModelTimeSeriesAgo', value);
            },
        },
        vModelEpochAgo: {
            get() {
                console.log('get.vModelEpochAgo:', this.vModelEpochAgo);
                return this.vModelEpochAgo;
            },
            set(value) {
                console.log('set.vModelEpochAgo:', this.vModelEpochAgo);
                this.$emit('update:vModelEpochAgo', value);
            },
        },
    },
    methods: {
        onTimeSeriesAgoChanged() {
            console.log('onTimeSeriesAgoChanged');
        },
        onEpochAgoChanged() {
            console.log('onEpochAgoChanged');
        },
    },
};

Answer 1

您面临的问题可能是由于组件首次安装时 vModelTimeSeriesAgo 和 vModelEpochAgo 的初始未定义值造成的。

您可以使用组件中的 setup 函数设置这些属性的初始值。

import { ref } from 'vue';

export default {
  name: 'NDVIComparisonGUI',
  setup(props, { emit }) {
    // Initialize the initial values
    const vModelTimeSeriesAgo = ref('initial_value_for_time_series');
    const vModelEpochAgo = ref('initial_value_for_epoch');

    // ... rest of your code ...

    return {
      vModelTimeSeriesAgo,
      vModelEpochAgo,
      // ... other properties and methods ...
    };
  },
};

通过使用 setup 函数中的 ref 函数初始化这些属性，可以确保它们在首次安装组件时具有初始值。

请记住将 'initial_value_for_time_series' 和 'initial_value_for_epoch' 替换为您要设置的实际初始值。

此外，由于您使用的是 Vue 3 的 Composition API，因此不需要像 Vue 2 中那样使用数据函数或计算对象。相反，您可以直接在设置函数中定义反应式属性。