Question

在我的Vue.js项目中。用户可以输入任何文本。我需要在本地JSON文件中搜索此输入作为键，返回属性并解析为字符串。

<template>
  <div>
    <input v-model="userInput" placeholder="search fruit">
    <p>The color of {{ userQuery }}s is {{ returnedColorResult }}</p>
  </div>
</template>

<script>
  export default {
  input: 'Userinput',
  data () {
    return {
    userQuery: ''
  }
 }
}

现在我将他们的输入存储在{{userQuery}}中。

JSON是

{
"banana" : "yellow",
"orange" : "orange",
"pear" : "green",
"apple" : "red"
}

我的搜索脚本不完整

<script>
 import json from "../data/fruitColors.json"
 export default {
     data() {
         return {
             myJson?: json?
         }
     }
 }
</script>

如何使用{{userQuery}}中的内容在JSON中搜索它，返回配对属性并使其可用于{{returnedColorResult}}？

任何帮助非常感谢。

Answer 1

一个非常基本的Vue示例，说明如何执行此操作。

＆＃13;

console.clear()

const json = {
"banana" : "yellow",
"orange" : "orange",
"pear" : "green",
"apple" : "red"
}

new Vue({
  el: "#app",
  data () {
    return {
      userQuery: '',
      json
  }
 }
})

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.js"></script>
  <div id="app">
    <input v-model="userQuery" placeholder="search fruit">
    <p>The color of {{ userQuery }}s is {{ json[userQuery] }}</p>
  </div>

＆＃13;

在JSON中搜索密钥，在Vue中搜索

1 个答案: