Question

无法理解为什么使用方法更新数据时为什么不重新渲染应用程序，任何人都可以看到问题所在吗？谢谢！

单击按钮时，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>

Answer 1

DTal，这里有几件事情要考虑。我注意到您同时使用selectedPage作为页码和页面ID。将这两个都映射到两个单独的变量可能更简单。

要考虑的另一件事是，您可能还希望绑定选择的书。 Vuejs不会更新内部信息，因为它已经完成了v-for循环。如果您将一个div（使用v-bind:绑定到一本书，并跟踪data()区域中选择了哪本书，那么它可能会具有您想要的行为。

Answer 2

模板中有很多事情需要修复，以使您的代码能够运行，但是最主要的是未能使它运行（主要是从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"

我绝对认为您可以以更有效的方式维护页码（但这是另一个问题）

更新数据后页面无法重新呈现-Vue.js

2 个答案: