<b-form-input> 绑定值第二次不更新

Question

我目前正在实现一个组件，当 year to / year[1] 值低于 year from / year[ 时更新父级的 year[] 数组0] 与 <b-input>（Bootstrap Vue 库）。

第二次后停止更新的年份。

代码示例如下。

jsfiddle 中的等效代码可以在here 找到。

父.vue

<template>
  <child :year="year" @update="update">
</template>

<script>
// Import child component here

export default {
  name: 'Parent',
  components: {
    Child,
  },
  data: () => ({
    year: [100, null],
  }),
  methods: {
    update(newYear) {
      this.year = newYear;
    },
  },
</script>

Child.vue

<template>
  <div>
    From <b-input :value="year[0]" />
    To <b-input :value="year[1]" @change="update" />
  </div>
</template>

<script>
export default {
  name: 'Child',
  props: {
    year: {
      type: Array,
      required: true,
    }
  },
  methods: {
    update(yearToVal) {
      const [yearFrom] = this.year;
      let newYear = [...this.year];
      
      if (yearToVal < yearFrom) {
        /* Both of this update end up the same */
        // newYear[1] = yearFrom;
        this.$set(newYear, 1 , yearFrom);
      }
      this.$emit('update', newYear);
    },
  },
};
</script>

我曾使用 Vue Dev Tools 进行检查，孩子正在正确地向父母发送数据。

问题发生在vModalValue 和localValue 上，<b-input> 没有第二次更新。

我做错了什么还是 Bootstrap Vue 库的问题？

Answer 1

Hiws's answer 表示这个问题不仅发生在<b-form-input> 上，普通的<input> 也发生在 Vue 上。

这是因为 Vue 无法对更改做出反应，因为更新发生在子级上，因此当 year to 低于 year from 时，父级不会检测到数组传递给 Parent.vue 时第二次的任何更改将始终为 [100,100]。

解决方案将在 Parent.vue 的数组上使用 watcher 来检测更改，因此例如：[100, 1] -> [100,100] 都反映在 Parent.vue 上，最重要的是，强制组件重新渲染。

如果不强制重新渲染，[100,1] or [100,2]... 将始终被视为 [100,100]，相同的值，Vue 不会对它们做出反应甚至更新。

Jsfiddle equivalent solution can be found here

下面的代码示例：

父.vue

<template>
  <child :year="year" @update="update">
</template>

<script>
// Import child component here

export default {
  name: 'Parent',
  components: {
    Child,
  },
  data: () => ({
    year: [100, null],
    yearKey: 0,
  }),
  watch: {
    year: {
      handler(val) {
        if (val[1] < val[0]) {
          let newYear = [...val]; 
          newYear[1] = val[0];
          this.year = newYear;
          // key update reference: https://michaelnthiessen.com/force-re-render/
          this.yearKey += 1;
        }
      }
    }
  },
  methods: {
    update(newYear) {
      this.year = newYear;
    },
  },
</script>

Child.vue

<template>
  <div>
    From <b-input :value="year[0]" />
    To <b-input :value="year[1]" @change="update" />
  </div>
</template>

<script>
export default {
  name: 'Child',
  props: {
    year: {
      type: Array,
      required: true,
    }
  },
  methods: {
    update(yearToVal) {
      const [yearFrom] = this.year;
      let newYear = [...this.year];
      newYear[1] = yearToVal;

      this.$emit('update', newYear);
    },
  },
};
</script>