Question

希望一切都很好。

我正在尝试使vue实例中的数据具有反应性：

new Vue({// eslint-disable-line no-new
  el: '#app',
  data () {
    return {msg: 'not updated'}
  },
  router,
  components: { App },
  template: '<App/>',
  mounted () {
    axios.get('http://127.0.0.1:8000/api/stores').then(response => (console.log(response.data.data)))
  }
})

现在，当我尝试使用{{msg}}时。但是我遇到了错误：

属性或方法“ msg”未在实例上定义，但已引用在渲染期间

任何原因吗？

Answer 1

对于组件“ App”设置道具：

new Vue({
    name: 'App',
    //set props msg for recieve from parent
    props: {
        msg: String
    },
    router,
    template: '<p>{msg}</p>'
  })

并从组件模板传递味精：

<App :msg="msg" />

Answer 2

有效：

<template>
  <div id="app">
    {{msg = 'AA'}}
    <img src="./assets/logo.png">
  </div>
</template>

new Vue({// eslint-disable-line no-new
  el: '#app',
  props: {
    msg: String
  },
  router,
  components: {App},
  template: '<App />',
  mounted () {
    axios.get('http://127.0.0.1:8000/api/stores').
    then(response =>(console.log(response.data.data)))
  }
})

如何在Vue中使数据属性具有反应性？

2 个答案: