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

Question

我正在尝试使用 Vue.js 进行 SPA，但不幸的是，我对此几乎一无所知，我按照教程进行操作并开始运行。希望这应该相对简单！

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

• 调用 REST API 并提取一些 JSON
• 结果列表中包含特定字段链接的列表显示在屏幕左侧

（我一直到这里）

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

例如，假设我的 JSON 是：

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

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

setup1
setup2
setup3

所以如果我在 setup1 中单击，我会看到妙语 1，setup2 会显示妙语 2，依此类推。

这是我的代码 - 我基本上是想在moduleinfo div 中显示妙语。我意识到当前的解决方案不起作用。我一直在寻找，但找不到任何类似的例子。任何指针将不胜感激。

<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>

谢谢！

Answer 1

我在我的 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>

Answer 2

您可以在数据对象中添加一个新属性，然后在单击<a> 标记时创建一个新方法来相应地设置它。看看下面的代码，它是您当前解决方案的副本，经过编辑和简化以显示我为使您更容易找到它而添加的内容。

select 方法会将点击笑话的对象插入到selectedJoke，以便您可以在模块信息下方呈现它。

因为它默认为null，它可能是null 或undefined，您必须将v-if 添加到属性中以检查是否有值，这样您就不会出错控制台。

<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="#" @click.prevent="select(value)">{{ value.setup }}</a>
          </li>
        </ul>
      </div>
    </div>
    <div class="moduleinfo">
      <h2>Module info</h2>
      <p v-if="selectedJoke">{{ selectedJoke.punchline }}</p>
    </div>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  name: 'Home',

  data: function(){
    return {
      jokes: [],
      search : "",
      selectedJoke: null,
    }
  },
  methods: {
    select(joke) {
      this.selectedJoke = joke;
    },
  },
};
</script>