Aquí la idea es ver los cambios realizados en el archivo JSON y si se cambia algún valor, cambia automáticamente la condición 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>Ahora viene la parte difícil, necesito poder cambiar el archivo JSON después de la compilación y cambiar automáticamente lo que se mostrará.
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' } })No es posible observar los cambios dentro de un archivo json. Lo que podría hacer es establecer el json en una propiedad reactiva y verificar los cambios allí. Al cambiar el JSON, también debe actualizar la propiedad reactiva para que el observador se active
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 } } })Ahora debería saber que los cambios en un archivo JSON no son persistentes.
Resuelvo este problema con axios. :)
methods: { updateData () { axios.get('../static/client/data.json').then(response => { console.log(response.data) this.dataClient = response.data }) } }, created () { this.updateData() }Ahora, cuando cambie el archivo JSON en la carpeta 'dist' después de compilar y actualizar el navegador, cargará un nuevo valor.