Vue.js - 观察 JSON 文件中的变化

Question

这里的想法是观察 JSON 文件中所做的更改，如果某些值发生更改，它会自动更改条件 v-if。

<div id="app">
 <div v-if="content == 'one'">
   <p>Content one</p>
 </div>
 <div v-else-if="content == 'two'">
   <p>Contentn two</p>
 </div>
</div>

现在棘手的部分来了，我需要能够在构建后更改 JSON 文件，并自动更改将显示的内容。

new Vue({
  el: "#app",
  data: {
   content: ''
  },
  methods: {
    // import of JSON and value that will assign value to this.content
        // Now value can be 'one' or 'two'
  }
})

Answer 1

不可能观察 json 文件中的变化。 您可以做的是将 json 设置为反应属性并检查那里的更改。 更改 JSON 时，您还需要更新响应属性，以便触发观察者

new Vue({
  el: "#app",
  data: {
   content: ''
  },
  watch: {
    content: function (val) {
      // do something when content has changed
    },
    },
  methods: {
    importJson() {
            // import json and set contents to content
    },
    saveJson(newJSON) {
        this.content = newJSON
      // Somehow save the json data to the json file
    }
  }
})

您现在应该对 JSON 文件的更改不是持久的。

Answer 2

我用 axios 解决了这个问题。 :)

methods: {
        updateData () {
          axios.get('../static/client/data.json').then(response => {
            console.log(response.data)
            this.dataClient = response.data
          })
        }
      },
      created () {
        this.updateData()
      }

现在，当您在构建和刷新浏览器后更改“dist”文件夹中的 JSON 文件时，它将加载新值。