为啥我的 vue 组件不重新渲染？

Posted 2023-02-23

【中文标题】为啥我的 vue 组件不重新渲染？

【英文标题】：Why not my vue component not re-rendering?为什么我的 vue 组件不重新渲染？

【发布时间】：2020-10-15 03:38:01

【问题描述】：

我有一个问题，为什么不使用这个组件，而不是在更改值后重新渲染，所以我想做的是像亚马逊这样的动态过滤器，使用唯一的复选框，所以让我们看看 我有 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 包含过滤器组件和我想要显示的测试值，过滤器数据是包含对象数组的虚拟数据。 在我的测试过滤器组件中，我循环抛出过滤器道具和过滤器输入组件输出我想要的输入，在这种情况下是复选框。

test-filter.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 和每个组件具有作为道具的价值，如果你想看看其余的组件，如果你做到了，我会很高兴。

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

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

【问题讨论】：

使用反应属性:)

您提供的代码存在一些问题。请尝试在适当的位置重新创建一个工作示例，例如codesandbox.io/s/vue，以便我们详细查看。

我做了一个，请检查控制台：codesandbox.io/s/thirsty-varahamihira-nhgex?file=/src/…

我发现了为什么会发生这种奇怪行为的问题，因为我没有在我的复选框输入中使用“v-model” 我尝试在输入中使用 v-model 并且它有效并且组件重新渲染....但是有任何方法可以解决这个问题。

【参考方案1】：

我找到了解决方案 正如我在 cmets 中所说，问题是我没有在我的复选框输入中使用 v-model Vue 是一个非常棒的框架，问题并不深入，我测试了 v-model在我的复选框输入中，我发现它在我选择任何复选框后重新渲染组件，所以我搜索更多并找到this article 并在其中解释了我们如何在自定义组件中实现 v-model ，这就是我的解决方案问题，如果您想查看，我也会更新我的codeSandbox Example。

感谢所有支持我找到解决方案的人：sarkiroka，Jakub A Suplick