0
divのコンテンツをVue.jsと入れ替えるにはどうしたらいいですか？一般的なライフサイクルの知識が不足していると思います。ここまで私はこれまで何を得ています。結局のところ、私は2つのVueインスタンス間を交換する必要があり、それらのためにライトボックスコンテナを1つだけ使用したいと考えています。ここでコンテンツを交換するには
はI'veがこれまでに得たものである：http://jsbin.com/qokerah/edit?html,js,output
HTML
<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.16/vue.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<script type="x-template" id="foo-template">
<div class="text">{{ fooText }}</div>
<div class="confirm" v-if="fooConfirm">confirmed</div>
</script>
<script type="x-template" id="bar-template">
<div class="heading">{{ barHeading }}</div>
<div class="info">{{ barInfo }}</div>
</script>
<div class="foo">
<div class="btn btn-primary" v-on:click="swapLightboxContent">Open foo template</div>
</div>
<div class="bar">
<div class="btn btn-primary" v-on:click="swapLightboxContent">Open bar template</div>
</div>
<div class="lightbox">
<div class="lightbox-content">Show foo- or bar-template</div>
</div>
</body>
</html>
JS
var foo = new Vue({
el: '.foo',
data: {
fooText: 'text',
fooConfirm: false
},
methods: {
swapLightboxContent: function() {
console.log('Show foo-template');
}
}
});
var bar = new Vue({
el: '.bar',
data: {
barHeading: 'text',
barInfo: 'text'
},
methods: {
swapLightboxContent: function() {
console.log('Show bar-template');
}
}
});
あなたにして行うことがvmFooとvmBarインスタンスを通じてcurrentView項目にアクセスするかどうかを把握する必要がありますa = "b"：current-view = "currentView"> 'を使用して、すべてのプロパティを子インスタンスに渡すことができます。 – Jeff