vue如何修改本地json文件
时间: 2023-06-01 19:08:10 浏览: 500
vue+axios+获取本地JSON,能量树能量收集
如果您想使用Vue来修改本地JSON文件,可以使用Axios将JSON文件加载到Vue中,然后您可以使用Vue的数据绑定绑定和修改该JSON文件的内容。以下是一个示例代码:
```javascript
<template>
<div class="json-editor">
<div v-for="(value, key) in jsonData" :key="key">
<span>{{ key }}:</span>
<input type="text" v-model="jsonData[key]" />
</div>
<button @click="saveChanges()">Save Changes</button>
</div>
</template>
<script>
import axios from 'axios';
export default {
data() {
return {
jsonData: {}
};
},
mounted() {
axios.get('/your/json/file.json').then(response => {
this.jsonData = response.data;
});
},
methods: {
saveChanges() {
axios.post('/your/json/file.json', this.jsonData).then(response => {
console.log(response.data);
});
}
}
};
</script>
```
在上面的代码中,我们使用Axios加载本地JSON文件并将其存储在Vue的数据中。在模板中,我们使用v-for循环遍历数据并将其绑定到表单元素中。通过使用v-model指令,我们可以实现双向数据绑定。最后,我们在saveChanges()方法中使用Axios的post()方法将修改后的数据保存回JSON文件中。
阅读全文