vue.js 从不更新从子项接收的事件

e0bqpujr  于 2023-08-07  发布在  Vue.js
关注(0)|答案(2)|浏览(103)

我可以从我的孩子那里发送事件,但值永远不会改变。这是因为我必须在父对象中初始化我的对象。
在父母中

const courses: Ref<undefined|Course[]> = ref()

const f = ref<IFilter>({
    advanced: false,
    all: true,
    docker: false,
    gcp: false,
    go: false,
});

api.getAll(1,6, f.value).then(c => courses.value = c)

function checkit() {
    console.log("fired " + f.value.go)
    api.getAll(1,6, f.value).then(c => courses.value = c)
}

<template>
    <div v-if="!courses">Loading courses...</div>
    <div v-else>
        <div class="flex grid-cols-2 justify-start">
            <div class="">
                <Filter :filter="f" @filter-change="checkit"/>
            </div>
</template>

字符串
那么在我的孩子身上

const filter = ref<IFilter>({
   advanced: false,
   all: true,
   docker: false,
   gcp: false,
   go: false,
});

const emit = defineEmits(['filterChange'])

let updateFilter = () => {
    console.log("value in filter " + filter.value.go)
    emit('filterChange', filter.value);
}


模板片段

<template>
                    <div class="flex items-start">
                        <div class="flex items-center h-5">
                            <input id="gcp" name="gcp" type="checkbox" v-model="filter.gcp" v-on:change="updateFilter"
                                   class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded">
                        </div>
                        <div class="ml-3 text-sm">
                            <label for="gcp" class="font-medium text-gray-200">GCP</label>
                        </div>
                    </div>
</template>


子级中的事件记录一个更改,但在父级中,它被静态设置为初始化它的值。我该怎么改变呢?

7gyucuyw

7gyucuyw1#

您的事件包括更新的筛选器数据,您可以使用它来更新父级中的筛选器值:

function checkit(changedFilter:IFilter) { // pass in child filter value
  f.value = changedFilter  // assign the child filter values to local filter
  ...
}

字符串
应该就这些了

carvr3hs

carvr3hs2#

我认为应该使用reactive()而不是ref()来管理对象的状态。试试看:

const f = reactive<IFilter>({
    advanced: false,
    all: true,
    docker: false,
    gcp: false,
    go: false,
});

字符串

相关问题