Question

我正在使用与Vue.js的路由，我正在尝试使用v-if来条件显示2个div。第一个div是项目列表。第二个div是项目的详细信息。我尝试做的一个很好的例子就是类似于Gmail。您有电子邮件列表，当您点击主题时，您将进入显示整个电子邮件的页面。

我有点使用v-if工作。在我的数据中，我有一个名为view的变量。页面加载时，此值设置为“list”，显示列表div。当有人点击列表div中的某些内容时，此值将切换为“详细信息”。细节div显示。

我遇到的问题是如果用户点击浏览器中的后退按钮，则视图变量不会更新。这似乎是一种常见的情况，所以我想知道是否有更好的方法来做到这一点。

    <div id="app">
    {{ view }} //for debugging

    <div class="list" v-if="view === 'list'"> 
    <table>
        <tr v-for="item in list">
            <td><router-link v-on:click.native="doSomething" v-bind:to="'/items/' + item.id">{{ item.title }}</router-link></td>
        </tr>
    </table>
    </div>
    <div class="details" v-if="view === 'details'">
        <router-view></router-view>
    </div>
</div>

我的Vue宣言中的片段。

           data: {
                view : "list"
            },

            doSomething: function () {
                    var app = this;
                    app.view = "details"; 
                }

Answer 1

试试这个：

{
    path: '/',
    name: 'emails',
    component: Emails,
},
{
    path: '/login',
    name: 'email.show',
    component: EmailShow,
}

然后添加两条路线：

Emails

之后，EmailShow组件应处理显示所有电子邮件的逻辑，def remove_strikethroughs(xlsx): excel = win32com.client.Dispatch('Excel.Application') xl = pd.ExcelFile(xlsx) sheet_names = xl.sheet_names for sheet in sheet_names: if any(tab in sheet for tab in tabs_used): #print (sheet) wb = excel.Workbooks.Open(xlsx) ws = wb.WorkSheets(sheet) for cell in ws.Range('A5:B150'): if cell.Font.Strikethrough == True: cell.value = '[MDU]' + str(cell) wb.Save() wb.Close() excel.Visible = True excel.DisplayAlerts = True excel.Application.Quit()应处理仅显示一封电子邮件

如何使用Vue.js中的后退按钮处理v-if？

1 个答案: