Question

我使用v-on：click构建了两个按钮切换，可在单击时呈现特定的数据对象，同时删除先前单击的对象。我想对多个数据对象继续使用此功能，因此我可以有许多按钮和相应的对象。我想在不使用路由的情况下实现这一目标，但是我不确定最佳方法。

我假设我应该使用绑定，但是我无法根据单击哪个按钮来动态更新变量。

我的一个数据对象：

const app = new Vue({
el: '#app',
data: {
search: '',
postList: [
new Post(
'Vue.js',
'https://vuejs.org/',
'mushroom',
'image/mushroom.jpg'),

new Post(
'React.js',
'https://facebook.github.io/react/',
'10 coin',
'https://daynin.github.io/clojurescript-presentation/img/react-logo.png'),

new Post(
'Angular.js',
'https://angularjs.org/',
'20 coin',
'https://angularjs.org/img/ng-logo.png'),

]}，

computed: {
filteredList() {
  return this.postList.filter(post_any => {
    return 
post_any.author.toLowerCase().includes(this.search.toLowerCase());
  });
 } 
} 

});


 And a simple two way toggle:

  <div v-if="awesome">
 <div  id="#app">
 <div class="search-wrapper">
<input type="text" v-model="search" placeholder="Search title.."/>
    <label>Search title:</label>
 </div>
 <div class="wrapper">
  <div class="card" v-for="post in filteredList">
  <a v-bind:href="post.link" target="_blank">
    <img v-bind:src="post.img"/>
    <small>posted by: {{ post.author }}</small>
    {{ post.title }}
  </a>
  </div>
</div>
</div>
</div>


the buttons: 
 <h1 v-if="!awesomer"><button v-on:click="awesome = !awesome">Super 
Mario</button></h1>
<h1 v-if="!awesome"><button v-on:click="awesomer = !awesomer">Mario

NES

没有错误，但是我相信有一个我看不到的简单解决方案。任何有关如何解决此问题或解决此类功能的资源的建议都将不胜感激。

Answer 1

您正在构建类似于Accordion component的东西。

需要的是将切换数据集以及activeIndex属性存储在更大的列表中。在模板中，您将使用v-if或v-show遍历列表对象，以测试是否应显示数据。这将取决于任何对象的列表索引是否匹配activeIndex。单击按钮时，可以通过单击处理程序设置activeIndex。这似乎很复杂，因为您的代码存在主要的结构性问题。我建议您进一步学习Vue，因为您的Codepen格式不正确：

1）您应该只有一个new Vue实例，而不是将您的应用拆分为多个应用。

2）您将要为切换集使用可重用的组件，而不是在模板和代码中重复输入并重复创建相同的功能。通常，您要避免违反编程的DRY（不要重复自己）准则。像Vue这样基于组件的框架旨在通过使用组件来解决这个问题。

3）您可以使用组件属性将每个集合的数据传递到其组件。

4）当您可以使用列表代替时，您也不需要在需要下一个组件的每个位置手动在模板中键入组件代码。这就是v-for背后的想法：根据列表生成重复的模板内容。

因此，您将要创建一个更大的数组，其中包含所有切换集数据的列表，然后您可以使用v-for进行迭代，并在每次迭代中创建一个切换组件。像这样：

<div id="app">
  <div v-for="(info, index) in mydata">
    <button @click="setActive(index)">
      {{ info.title }}
    </button>
    <div v-show="index == activeIndex">
      <Toggle :info="info" />
    </div>
  </div>
</div>

多按钮切换，无需使用路线

1 个答案: