除非我刷新页面，否则 Vue data() 对象输入 v-model 不起作用

Question

所以这很难解释，相反我制作了一个视频来展示正在发生的事情：

https://www.youtube.com/watch?v=md0FWeRhVkE

分步说明：

• 用户可以创建一个新帐户。
• 此用户将自动登录（尚无电子邮件验证步骤）。
• 然后在不刷新页面的情况下，我尝试添加一个类别。
• 有一个自定义组件被 v 建模为 data() 值（正如您在视频中看到的，这是 category_name。
• 每当我在输入字段中填写内容时，这应该会显示在输入字段的上方（因为我正在那里转储值）。您会发现在页面刷新之前不会发生这种情况。
• 但是当我刷新页面时，v-model 突然起作用了。

有人知道我最初注册用户时发生了什么以及为什么它不起作用吗？除非您刷新页面，否则似乎不会创建 data() 值 category_name 或其他东西？

谢谢！

Answer 1

您的自定义输入 (Input.vue) 未声明和使用 v-model 绑定的 value 属性 - 请参阅 v-model on custom component works 上的文档

这不是只有双向绑定才需要吗？如我所见，绑定 value 属性只允许从父级更改输入值

嗯，不完全是。 value 绑定（“来自父级的值”）在任何时候创建和重用组件时都是必不可少的。

重用现有组件实例是 Vue 使用的非常常见（且有用）的优化策略。您可以使用下面的示例来查看缺少 value 竞价对自定义输入的影响。

组件的创建频率超出您的想象。切换到“Fixed”组件并返回演示了在动态创建组件的情况下（例如，在路由器视图或某种自定义“Tab”组件中使用时），v-model 没有绑定value 是如何损坏的

我知道这是“远射”——我不确定这是否能解决问题（共享 git repo 不符合我对 Minimal, Reproducible Example 的定义）但是这绝对是一个错误而且我没有看到其他代码有什么特别错误的地方......

考虑到没有value 的自定义输入是多么糟糕，有理由认为 Vue 开发人员从未预料到这样的用法，并且它可能导致各种“奇怪”和意想不到的行为......

Vue.component('my-input-broken', {
  props: ['name', 'type', 'label'],
  methods: {
    inputHandler(e) {
      this.$emit('input', e.target.value);
    },
  },
  template: `
  <div v-if="name && type" :id="name">
        <input v-if="type !== 'textarea'" @input="inputHandler" :name="name" :type="type" />
        <textarea v-else-if="type === 'textarea'" @input="inputHandler" @blur="blurHandler($event)" :name="name" type="textarea" />
        <label v-if="label" :for="name">{{label}}</label>
    </div>
  `
})

Vue.component('my-input-fixed', {
  props: ['name', 'type', 'label', 'value'],
  methods: {
    inputHandler(e) {
      this.$emit('input', e.target.value);
    },
  },
  template: `
  <div v-if="name && type" :id="name">
        <input v-if="type !== 'textarea'" @input="inputHandler" :name="name" :type="type" :value='value' />
        <textarea v-else-if="type === 'textarea'" @input="inputHandler" @blur="blurHandler($event)" :name="name" :value='value' type="textarea" />
        <label v-if="label" :for="name">{{label}}</label>
    </div>
  `
})

const vm = new Vue({
  el: '#app',
  data: function() {
    return {
      values: [""],
      componentToUse: 'a'
    }
  },
  methods: {
    addInput() {
      this.values.unshift("")
    }
  },
  computed: {
    comp() {
      return this.componentToUse === 'a' ? "my-input-broken" : "my-input-fixed"
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.js"></script>

<div id="app">
  <label for="componentToUse">Component to use:</label>
  <input type="radio" name="componentToUse" v-model="componentToUse" value="a"> Broken
  <input type="radio" name="componentToUse" v-model="componentToUse" value="b"> Fixed
  <hr>

  <button @click="addInput">Add at beginning...</button>
  <component :is="comp" v-for="(value, index) in values" :key="index" v-model="values[index]" :name="`value_${index}`" type="text" :label="`value_${index} ('${values[index]}')`"></component>
</div>

Answer 2

我想我现在明白v-model的主要问​​题了。

<input v-model="myObject[attribute]" />

等价于

<input
  v-bind:value="myObject[attribute]"
  v-on:input="myObject[attribute] = $event"
  />

在我的情况下，问题是在重新分配 myObject[attribute] 后 GUI 没有刷新。

我对这个问题的解决方法是在重新分配变量后调用$forceUpdate()，如下所示：

<input
  v-bind:value="myObject[attribute]"
  v-on:input="myObject[attribute] = $event; $forceUpdate()"
  />

不确定这是否能解决您的问题，但我希望它可以帮助遇到同样问题的人。