LPasslack
7/9/2018 - 8:58 AM
JS Bin // source https://jsbin.com/vulumis
JS Bin
// source https://jsbin.com/vulumis
var obj = {
foo: 'bar',
testArr : [
{
text: "Zeile 1",
attr: {
show : false,
hText : "Hidden Test 1"
}
},
{
text: "Zeile 2",
attr: {
show : false,
hText : "Hidden Test 1"
}
}
]
}
Object.freeze(obj)
new Vue({
el: '#app',
data: obj,
methods: {
show: function(idx) {
console.log(obj.testArr[1])
obj.testArr[1].attr["attr2"] ="Diesen Text gab es nicht";
obj.testArr[1].attr.show = true;
}
}
})<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.16/vue.js"></script>
<div id="app">
<p>{{ foo }}</p>
<!-- this will no longer update `foo`! -->
<button v-on:click="foo = 'baz'">Change it</button>
<ul>
<li v-for="test in testArr">
{{test.text}} <br/>
<button v-on:click="show(index)"> Klick mich</button>
<div class="hidden" v-if="test.attr.show"> {{test.attr.hText}}
{{test.attr.attr1}}<br/>
{{test.attr.attr2}}<br/>
<br/></div>
</li>
<ul>
</div>
<script id="jsbin-javascript">
var obj = {
foo: 'bar',
testArr : [
{
text: "Zeile 1",
attr: {
show : false,
hText : "Hidden Test 1"
}
},
{
text: "Zeile 2",
attr: {
show : false,
hText : "Hidden Test 1"
}
}
]
}
Object.freeze(obj)
new Vue({
el: '#app',
data: obj,
methods: {
show: function(idx) {
console.log(obj.testArr[1])
obj.testArr[1].attr["attr2"] ="Diesen Text gab es nicht";
obj.testArr[1].attr.show = true;
}
}
})
</script>
<script id="jsbin-source-javascript" type="text/javascript">
var obj = {
foo: 'bar',
testArr : [
{
text: "Zeile 1",
attr: {
show : false,
hText : "Hidden Test 1"
}
},
{
text: "Zeile 2",
attr: {
show : false,
hText : "Hidden Test 1"
}
}
]
}
Object.freeze(obj)
new Vue({
el: '#app',
data: obj,
methods: {
show: function(idx) {
console.log(obj.testArr[1])
obj.testArr[1].attr["attr2"] ="Diesen Text gab es nicht";
obj.testArr[1].attr.show = true;
}
}
})</script></body>
</html>