Vue.js - Watch changes in JSON file

Question

Here idea is to watch changes made in JSON file and if some value is changed it automatically changes the condition 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>

Now the tricky part comes, I need to be able after build to change the JSON file, and automatically to change what will be shown.

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

Its not possible to watch for changes inside a json file. What you could do is set the json to a reactive property and check for changes on there. When changing the JSON you also need to update the reactive property so the watcher gets triggered

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
    }
  }
})

You should now that changes to a JSON file are not persistent.

Answer 2

I solve this issue with axios. :)

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

Now when you change JSON file in 'dist' folder after build and refresh browser it will load new value.