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 文件時，它將加載新值。