I am new Vue.js, I am working invoice project using Vue.js. I want out put like this, output:
{
"invoiceFirstLevelCategory": [{
"categoryname": "first1",
"price": 30,
"invoiceSecondLevelCategory": [{
"categoryname": "first-1-2-1",
"price": 22
}, {
"categoryname": "first-1-2-2",
"price": 0,
"invoiceThirdLevelCategory": [{
"categoryname": "first-1-2-3-1",
"price": 11
}, {
"categoryname": "first-1-2-3-2",
"price": 11
}]
}]
}]
}
Check Mycode :
<!DOCTYPE html>
<html>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<body>
<div id="app">
<input type="text">
<button v-on:click="addsecond">add second</button>
<template>
<div v-for="pre_second in second">
<input type="text" v-model="pre_second.categoryname">
<input type="text" v-model="pre_second.price">
<button v-on:click="add_thrid(second)">add thrid</button>
<hr>
<div v-for="thrid in second_sub">
<input type="text" v-model="thrid.categoryname">
<input type="text" v-model="thrid.price">
<button v-on:click="add_thrid(second)">add next</button>
</div>
</div>
</template>
<pre>{{second|json}}</pre>
</div>
<script>
new Vue({
el: '#app',
data: {
second: [],
thrid: []
},
methods: {
addthrid: function() {
this.thrid.push({
categoryname: '',
price: 0
});
},
addsecond: function() {
this.second.push({
categoryname: '',
price: 0
});
},
add_thrid: function(arr) {
if (arr.isArray) {
console.log("they have nested", arr);
}
var th = this.thrid.push({
categoryname: '',
price: 0
});
console.log(this.thrid);
this.push(th);
}
}
//main
});
</script>
</body>
</html>
My code was wrong, but I tried it many way. I don't know where is my mistake and find the solution.
Property or method "second_sub" is not defined on the instance but referenced during render. And please add where current code is behaving wrong and how you want it to be.