Vue переменная данных в методы, а затем предоставить

Question

У меня проблема с получением некоторых значений из методов, и я хочу их предоставить. Как я могу решить проблему?

  methods: {
    onClickCategory: (value) => {
      return (this.catId = value);
    },
  },
  provide() {
    return {
      categoryId: this.value,
    };
  },

Я всегда получаю categoryId: undefined

Answer 1

Я нашел решение:

  methods: {
    onClickCategory(value) {
      this.categoryId.value = value;
    },
  },
  provide() {
    this.catID = this.categoryId;
    return {
      catId: this.catID,
    };
  },

Answer 2

As Vue Подсветка руководства ,

Примечание: привязки provide и inject НЕ являются реактивными. Это сделано намеренно. Однако, если вы передадите наблюдаемый объект, свойства этого объекта останутся реактивными.

Таким образом, одним из решений является перенос вашего значения в один наблюдаемый объект, например test2.value в пример ниже:

Vue.config.productionTip = false
Vue.component('v-parent', {template: `
    
      Example
      Not Working: 
      Working: 
      
    
`,
  data () {
    return {
      test1: 'blabla1',
      test2: {value: 'blabla2'}
    }
  },
  provide () {
    return {parent1: this.test1, parent2: this.test2}
  }
}),
Vue.component('v-child', {
  template: `{{parent1}}

{{parent2.value}}

`, inject: ['parent1', 'parent2']}) новый Vue ({el: '#app', data () {return {}}})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>
<div id="app">
  <div>
    <v-parent/>
  </div>
</div>