无法理解为什么使用方法更新数据时为什么不重新渲染应用程序,任何人都可以看到问题所在吗?谢谢!
单击按钮时,selectedPage正在使用changePage方法进行更新,但是页面上没有任何更改(在Vue开发工具中,我可以看到selectedPage正确更改了>
var app = new Vue({
el: '#app',
data: {
showMain: false,
isReader: true,
selectedPage: [0,0],
books: [
{
id: 0,
name: 'איה פלוטו',
image: 'https://upload.wikimedia.org/wikipedia/he/f/f3/%D7%90%D7%99%D7%94_%D7%A4%D7%9C%D7%95%D7%98%D7%95.jpg',
pageList: [
{id: 0, text: [',פלוטו כלבלב מקיבוץ מגידו','יש לו הכל, חלב ועצם','זה טוב ויפה, אבל בעצם','נמאס לו לשבת כך לבדו'], image: './images/wheres_pluto/page_1.jpeg'},
{id: 1, text: ['lived a princes in a big castle'], image: './images/wheres_pluto/page_2.jpeg'},
{id: 2, text: ['the END'], image: './images/wheres_pluto/page_3.jpeg'}
]
},
{
id: 1,
name: 'ספר שני',
pageList:[]
}
],
},
methods: {
changePage: function(event){
if(event == 'next'){
this.selectedPage[1] = this.selectedPage[1] + 1
} else {
this.selectedPage[1] = this.selectedPage[1] - 1
}
console.log(this.selectedPage)
}
}
})
html:
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/style.css">
<link href="https://fonts.googleapis.com/css2?family=Heebo:wght@100;300;400;500&display=swap" rel="stylesheet">
</head>
<body>
<div id='app'>
<!-- book selection page -->
<div class='page app-page' v-show="showMain">
<div class='book-list' v-for="book in books" :book='book.name'>{{book.name}}
<img :src='book.image' />
</div>
</div>
<!-- Book -->
<div class="book" v-for="book in books" v-if='book.id == selectedPage[0]' :key=book.id>
<div class="book-page" v-for="(page,index) in book.pageList" v-if='book.id == selectedPage[0] && book.pageList[index].id == selectedPage[1]'>
<!-- Video component -->
<div class="video">VIDEO HERE</div>
<!-- Reader's page -->
<div class="page reader-page" v-if="isReader" :key = page.id>
<div class="main-text" v-for='(lines,lineIndex) in book.pageList[index].text'>
<span>{{page.text[lineIndex]}}</span>
</div>
</div>
<!-- Kid's page -->
<div class="page kid-page" v-else>
<div class="video">VIDEO HERE</div>
<div class="img-container" :style="{ backgroundImage: 'url(' + page.image + ')' }">
</div>
</div>
<!-- controllers -->
<div class="controllers" v-if=isReader>
<button class="next" v-on:click='changePage("next")'>הבא</button>
<button class="prev" v-on:click='changePage("prev")'>קודם</button>
</div>
</div>
</div>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="js/main.js"></script>
</html>
答案 0 :(得分:0)
DTal,这里有几件事情要考虑。我注意到您同时使用selectedPage
作为页码和页面ID。将这两个都映射到两个单独的变量可能更简单。
要考虑的另一件事是,您可能还希望绑定选择的书。 Vuejs不会更新内部信息,因为它已经完成了v-for循环。如果您将一个div(使用v-bind:
绑定到一本书,并跟踪data()
区域中选择了哪本书,那么它可能会具有您想要的行为。
答案 1 :(得分:0)
模板中有很多事情需要修复,以使您的代码能够运行,但是最主要的是未能使它运行(主要是从Vue文档中直接复制)
vm.$set(vm.items, indexOfItem, newValue)
可以使用
实现if (event === "next") {
this.$set(this.selectedPage, 1, this.selectedPage[1] + 1);
} else {
this.$set(this.selectedPage, 1, this.selectedPage[1] - 1);
}
您的情况应该是
class(rfm_result)
[1] "rfm_table_order" "tibble" "data.frame"
我绝对认为您可以以更有效的方式维护页码(但这是另一个问题)