Javascript Vue.js动态更新div中的内容

我正在尝试使用Vue.js进行SPA，但不幸的是，我对它几乎一无所知，我遵循了一个教程并启动并运行了一些东西。这应该是相对简单的

我正在尝试创建一个简单的页面：

• 执行RESTAPI调用并提取一些JSON
• 屏幕左侧显示一个列表，其中包含结果列表中特定字段的链接

（在这里之前我一直在努力）

现在，我希望能够单击其中一个链接，并在屏幕右侧看到同一记录的另一个字段的值

例如，假设我的JSON是：

{
   "jokes":{
      [
         "setup":"setup1",
         "punchline":"punchline1"
      ],
      [
         "setup":"setup2",
         "punchline":"punchline2"
      ],
      [
         "setup":"setup3",
         "punchline":"punchline3"
      ]
   }
}

所以在我的屏幕上我会看到：

setup1
setup2
setup3

因此，如果我在setup1中单击，我会看到punchline1，setup2会显示punchline2，依此类推

这是我的代码-我基本上是在

moduleinfo

div中显示punchline。我意识到当前的解决方案不起作用。我一直在搜索，但找不到任何类似的例子。任何指点都将不胜感激

<template>
  <div class="home">
    <div class="module-list">
      <input type="text" v-model.trim="search" placeholder="Search"/>
      <div>
        <ul>
          <li class="modules" v-for="value in modulesList" :key="value.id">
            <a href="#">{{ value.setup }}</a>
          </li>
        </ul>
      </div>
    </div>
    <div class="moduleinfo">
      <h2>Module info</h2>
      <!-- <p>{{ value.punchline }}</p> -->
    </div>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  name: 'Home',

  data: function(){
    return {
      jokes: [],
      search : ""
    }
  },

  mounted() {
    this.getModules();
  },

  methods: {
    getModules() {
      var self = this

      const options = {
        method: 'GET',
        url: 'https://dad-jokes.p.rapidapi.com/joke/search',
        params: {term: 'car'},
        headers: {
          'x-rapidapi-key': '...',
          'x-rapidapi-host': 'dad-jokes.p.rapidapi.com'
        }
      };

      axios.request(options)
        .then(response => {
            self.jokes = response.data;
            console.log(response.data);
        }).catch(function (error) {
          console.error(error);
      });
    }
  },

  computed: {
    modulesList: function () {
      var jokes = this.jokes.body;
      var search = this.search;

      if (search){
        jokes = jokes.filter(function(value){
          if(value.setup.toLowerCase().includes(search.toLowerCase())) {
            return jokes;
          }
        })
      }
      return jokes;
    }
  },
};
</script>

模块信息
从“axios”导入axios；
导出默认值{
姓名：'家'，
数据：函数（）{
返回{
笑话：[]，
搜索：“
}
},
安装的（）{
这是getModules（）；
},
方法：{
getModules（）{
var self=这个
常量选项={
方法：“GET”，
网址：'https://dad-jokes.p.rapidapi.com/joke/search',
参数：{term:'car'}，
标题：{
“x-rapidapi-key”：“…”，
“x-rapidapi-host”：“爸爸开玩笑，p.rapidapi.com”
}
};
axios.request（选项）
。然后（响应=>{
self.jokes=response.data；
console.log（response.data）；
}).catch（函数（错误）{
控制台错误（error）；
});
}
},
计算：{
模块列表：函数（）{
var笑话=this.jones.body；
var search=this.search；
如果（搜索）{
笑话=笑话。过滤器（函数（值）{
if（value.setup.toLowerCase（）.includes（search.toLowerCase（）））{
回敬笑话；
}
})
}
回敬笑话；
}
},
};

---

谢谢

您可以在数据对象中添加一个新属性，然后在单击

模块信息
{{{selectedJoke.punchline}
从“axios”导入axios；
导出默认值{
姓名：'家'，
数据：函数（）{
返回{
笑话：[]，
搜索：“，
selectedJoke:null，
}
},
方法：{
选择（笑话）{
this.selectedJoke=笑话；
},
},
};

您可以在数据对象中添加新属性，然后在单击

模块信息
{{{selectedJoke.punchline}
从“axios”导入axios；
导出默认值{
姓名：'家'，
数据：函数（）{
返回{
笑话：[]，
搜索：“，
selectedJoke:null，
}
},
方法：{
选择（笑话）{
this.selectedJoke=笑话；
},
},
};

我在Vue 2 CLI应用程序中构建了一个示例单文件组件，当我回来发布它时，Ryoko已经用我推荐的相同方法回答了这个问题，添加了一个新属性来跟踪显示关键点

既然我已经构建了它，我想我也可以发布我的组件，它确实改变了布局，使用表而不是列表，但是功能是有效的

<template>
  <div class="joke-list">
    <div class="row">
      <div class="col-md-6">
        <table class="table table-bordered">
          <thead>
            <tr>
              <th>SETUP</th>
              <th>PUNCHLINE</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(joke, index) in jokes" :key="index">
              <td>
                <a href="#" v-on:click.prevent="getPunchline(index)">{{ joke.setup }}</a>
              </td>
              <td>
                <span v-if="joke.showPunchline">{{ joke.punchline }}</span>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        jokes: [
          {
            setup: "setup1",
            punchline: "punchline1"
          },
          {
            setup: "setup2",
            punchline: "punchline2"
          },
          {
            setup: "setup3",
            punchline: "punchline3"
          }
        ]
      }
    },
    methods: {
      getPunchline(index) {
        this.jokes[index].showPunchline = true;
      },
      addPropertyToJokes() {
        // New property must be reactive
        this.jokes.forEach( joke => this.$set(joke, 'showPunchline', false) );
      }
    },
    mounted() {
      this.addPropertyToJokes();
    }
  }
</script>

设置
妙语
{{笑话.笑话}
导出默认值{
数据（）{
返回{
笑话：[
{
设置：“设置1”，
punchline：“punchline 1”
},
{
设置：“设置2”，
punchline：“punchline 2”
},
{
设置：“设置3”，
punchline：“punchline 3”
}
]
}
},
方法：{
getPunchline（索引）{
this.crooks[index].showPunchline=true；
},
addPropertyToJones（）{
//新属性必须是反应性的
this.keops.forEach（笑话=>this.set（笑话，'showPunchline'，false））；
}
},
安装的（）{
this.addPropertyTo笑话（）；
}
}

我在Vue 2 CLI应用程序中构建了一个示例单文件组件，当我回来发布它时，Ryoko已经用我推荐的相同方法回答了这个问题，添加了一个新属性来跟踪显示关键点

既然我已经构建了它，我想我也可以发布我的组件，它确实改变了布局，使用表而不是列表，但是功能是有效的

<template>
  <div class="joke-list">
    <div class="row">
      <div class="col-md-6">
        <table class="table table-bordered">
          <thead>
            <tr>
              <th>SETUP</th>
              <th>PUNCHLINE</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(joke, index) in jokes" :key="index">
              <td>
                <a href="#" v-on:click.prevent="getPunchline(index)">{{ joke.setup }}</a>
              </td>
              <td>
                <span v-if="joke.showPunchline">{{ joke.punchline }}</span>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        jokes: [
          {
            setup: "setup1",
            punchline: "punchline1"
          },
          {
            setup: "setup2",
            punchline: "punchline2"
          },
          {
            setup: "setup3",
            punchline: "punchline3"
          }
        ]
      }
    },
    methods: {
      getPunchline(index) {
        this.jokes[index].showPunchline = true;
      },
      addPropertyToJokes() {
        // New property must be reactive
        this.jokes.forEach( joke => this.$set(joke, 'showPunchline', false) );
      }
    },
    mounted() {
      this.addPropertyToJokes();
    }
  }
</script>

设置
妙语
{{笑话.笑话}
导出默认值{
数据（）{
返回{
笑话：[
{
设置：“设置1”，
punchline：“punchline 1”
},
{
设置：“设置2”，
punchline：“punchline 2”
},
{
设置：“设置3”，
punchline：“punchline 3”
}
]
}
},
方法：{
getPunchline（索引）{
this.crooks[index].showPunchline=true；
},