[英]Why not my vue component not re-rendering?
我有一个问题,为什么不使用这个组件,而不是在更改值后重新渲染,所以我想做的是像亚马逊这样的动态过滤器,使用唯一的复选框,所以让我们看看我有 4 个组件 [App.vue, test-filter. vue, filtersInputs.vue, checkboxs.vue]
这是我的示例的代码沙箱,请检查控制台,您将看到值更改https://codesandbox.io/s/thirsty-varahamihira-nhgex?file=/src/test-filter/index.vue
第一个组件是 App.vue;
<template>
<div id="app">
<h1>Filter</h1>
{{ test }}
<test-filter :filters="filters" :value="test"></test-filter>
</div>
</template>
<script>
import testFilter from "./test-filter";
import filters from "./filters";
export default {
name: "App",
components: {
testFilter,
},
data() {
return {
filters: filters,
test: {},
};
},
};
</script>
所以 App.vue 包含过滤器组件和我想要显示的测试值,过滤器数据是包含对象数组的虚拟数据。 在我的测试过滤器组件中,我循环抛出过滤器道具和过滤器输入组件 output 在这种情况下我想要的输入复选框。
测试过滤器.vue
<template>
<div class="test-filter">
<div
class="test-filter__filter-holder"
v-for="filter in filters"
:key="filter.id"
>
<p class="test-filter__title">
{{ filter.title }}
</p>
<filter-inputs
:value="value"
:filterType="filter.filter_type"
:options="filter.options"
@checkboxChanged="checkboxChanged"
></filter-inputs>
</div>
</div>
<template>
<script>
import filterInputs from "./filterInputs";
export default {
name: "test-filter",
components: {
filterInputs,
},
props:{
filters: {
type: Array,
default: () => [],
},
value: {
type: Array,
default: () => ({}),
},
},
methods:{
checkboxChanged(value){
// Check if there is a array in checkbox key if not asssign an new array.
if (!this.value.checkbox) {
this.value.checkbox = [];
}
this.value.checkbox.push(value)
}
};
</script>
所以我需要了解为什么更改 props 值也会更改为父组件,在这种情况下,App.vue 和我尝试将值发送到 App.vue 组件也没有重新渲染但是如果我检查vue 开发工具我看到值发生了变化,但在 {{ test }} 的 DOM 中没有。 所以我不会用更多代码让你感到无聊,filterInputs.vue 包含称为复选框的子组件,然后我将选定复选框的值从 checkboxes.vue 发送到 filterInputs.vue 到 test-filter.vue 和每个组件具有作为道具的价值,如果你想看看 rest 的组件,我会很高兴如果你这样做了。
过滤器输入.vue
<template>
<div>
<check-box
v-if="filterType == checkboxName"
:options="options"
:value="value"
@checkboxChanged="checkboxChanged"
></check-box>
</div>
</template>
<script>
export default {
props: {
value: {
type: Object,
default: () => ({}),
},
options: {
type: Array,
default: () => [],
},
methods: {
checkboxChanged(value) {
this.$emit("checkboxChanged", value);
},
},
}
</script>
复选框.vue
<template>
<div>
<div
v-for="checkbox in options"
:key="checkbox.id"
>
<input
type="checkbox"
:id="`id_${_uid}${checkbox.id}`"
@change="checkboxChange"
:value="checkbox"
/>
<label
:for="`id_${_uid}${checkbox.id}`"
>
{{ checkbox.title }}
</label>
</div>
</div>
<template>
<script>
export default {
props: {
value: {
type: Object,
default: () => ({}),
},
options: {
type: Array,
default: () => [],
},
}
methods: {
checkboxChange(event) {
this.$emit("checkboxChanged", event.target.value);
},
},
};
</script>
我找到了解决方案 正如我在评论中所说,问题是我没有在我的复选框输入中使用 v-model Vue 是一个非常棒的框架,问题并不深入,我在我的复选框中测试了 v-model输入,我发现它在我 select 任何复选框之后重新渲染组件,所以我搜索更多并找到这篇文章,其中解释了我们如何在自定义组件中实现 v-model,这是我的问题的解决方案,也是我如果您想查看它,请更新我的codeSandbox 示例。
感谢所有支持我找到解决方案的人:sarkiroka,Jakub A Suplick
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.