vue.js - 数据更新时页面不重新渲染——Vue.js
问题描述
无法理解为什么使用方法更新数据时应用程序没有重新渲染,任何人都可以看到问题所在吗?谢谢!
单击按钮时, 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>
解决方案
DTal,这里有几件事要考虑。我注意到您同时使用selectedPage
了页码和页面 ID。将这两者映射到两个单独的变量可能更简单。
要考虑的另一件事是,您可能还想绑定选择的书。Vuejs 不会更新内部结构,因为它已经完成了 v-for 循环。如果您将其中一个 div(使用v-bind:
)绑定到一本书,并跟踪在该data()
区域中选择了哪本书,那么它可能具有您想要的行为。
推荐阅读
- ios - iOS 代码保护 - C 静态库或 Objective-C 框架?
- google-bigquery - 连接来自同一个表的 BigQuery 中具有相同 ID 的行
- xaml - Xaml Xamarin 网格列填充最小宽度
- cqrs - 如何将 Mediatr 实例化为单元测试的一部分?
- debugging - 将系统调用事件跟踪输出的格式更改为 ftrace
- php - 在比较另一个表的值并搜索表的字段内是否存在值后更新平板电脑的字段
- java - 无法使用 Java 中的 Weka 访问用于 ML 分类的训练数据集
- django - 如何在不授予用户访问 /admin 权限的情况下验证用户身份?
- c++ - IPC Unix 消息队列线程安全吗?
- c - 如何在 C 中实现移位操作的逆运算?