Question

有人帮我解决这个奇怪的问题吗？

我有以下vue组件：

<template lang="pug">
div
  p.alert.alert-info {{value}}
  button(@click="onChange") Change
</template>

<script>
  import Vue from 'vue';
  export default {
    name: 'z-temp',
    props: {
      value: {
        required: true
      }
    },
    watch: {
      value(val) {
        console.log(val);
      }
    },
    methods: {
      onChange() {
        this.$emit('input', Random.id());
      }
    }
  };
</script>

我想使用v-model，但当我使用<z-temp v-model="myDataField">时，myDataField在我点击Change按钮时会成功更改，但是当我进行反向操作时并在myDataField中添加一些值，例如myDataField: "foo"自定义组件获取this.value为undefined而不是foo。

有人可以帮我吗？

Answer 1

我猜测myDataField没有被动，所以问题出在父母身上。

Answer 2

你能澄清一下这个问题吗，好像它应该正常工作，即。该组件似乎不是问题。

＆＃13;

zTemp = Vue.component('ztemp', {
	template: '#ztemp',
  props: {
    value: {
      required: true
    }
  },
  watch: {
    value(val) {
      console.log(val);
    }
  },
  methods: {
    onChange() {
      this.$emit('input', Math.random());
    }
  }
});

new Vue({
  el: '#app',
  components: {
  	zTemp
  },
  data: {
  	myinput: '0.2'
  }
});

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.4/vue.min.js"></script>

<div id="app">
  {{myinput}}<br/>
  <input v-model="myinput"/><br/>
  <ztemp v-model="myinput"/><br/>
</div>

<script type="text/x-template" id="ztemp">
  <div>
    <p>{{value}}</p>
    <button @click="onChange">Change</button>
  </div>
</script>

＆＃13;

Answer 3

感谢您的帮助，但我meteor与vue-meteor一起使用，问题与vue-meteor有关。

我更改了项目结构，以便在.client文件夹中使用分离的Vue项目和问题gones。它不是组件的问题，而是使用vue-meteor包。无论如何，谢谢你们。

Vue v-model更改父数据但不更改自定义组件中的值prop

3 个答案: