Question

我正在学习vuejs，我需要根据点击触发的搜索字符串来过滤v-for循环。我已经看到了很多过滤器直接在输入上使用计算属性的示例，但这不适合我，因为我只想将符合条件的结果呈现给视图。尽管此代码默认情况下会显示整个列表，但这只是出于测试目的，在实际应用程序中，用户将事先选择所需的类别。

Vue脚本：

new Vue({
    el: '#app',
    data: {
        produtos: [],
        busca: '',
        mostrar: 8,
        mostrarBase: 8,
        categoriaAtiva: ''
    },
    methods: {
        loadData: function() {
            this.$http
                .get('js/produtos.json')
                .then(function(res) {
                    this.produtos = res.data;
                });
        },
        buscar: function(busca) {
            console.log(this.busca)
        },
    mounted: function() {
        this.loadData();
    }
});

JSON对象：

[
    {
        "categoria": "chaveiro",
        "valor": 17.80,
        "itens": [
        {
            "nome": "Caveira",
            "numero": 4004
        },
        {
            "nome": "Coração Color",
            "numero": 4005
        },
        {
            "nome": "Coração Tribal",
            "numero": 4006
        },
        {
            "nome": "Bonfim",
            "numero": 4090
        }]
    },
    {
        "categoria": "tag",
        "valor": 13.20,
        "itens": [
            {
                "nome": "Árvore",
                "numero": 6001
            },
            {
                "nome": "Casa Color",
                "numero": 6002
            },
            {
                "nome": "Caveira",
                "numero": 6004
            },
            {
                "nome": "Coração Color",
                "numero": 6005
            }]
    },
    {
        "categoria": "tagcarro",
        "valor": 9.20,
        "itens": [
        {
            "nome": "Kombi",
            "numero": 8048
        },
        {
            "nome": "Viagem",
            "numero": 8050
        },
        {
            "nome": "Anjo da Guarda",
            "numero": 8061
        },
        {
            "nome": "Bússola",
            "numero": 8091
        }]
    },
    {
        "categoria": "necessaire",
        "valor": 19.90,
        "itens": [
        {
            "nome": "Frida",
            "numero": 9013
        },
        {
            "nome": "Olho' Grego",
            "numero": 9024
        },
        {
            "nome": "Kombi",
            "numero": 9048
        },
        {
            "nome": "Unicórnio",
            "numero": 9075
        }]
    }
]

HTML：

<!doctype html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue</title>
    <link href="https://fonts.googleapis.com/css?family=Fira+Sans:300,300i,700,700i" rel="stylesheet">
    <link rel="stylesheet" href="css/app.css">
</head>

<body>
    <main id="app">
        <div class="w1200">
            <form v-on:submit.prevent="buscar">
                <input type="text" v-model="busca">
                <input type="submit" class="bt" value="buscar">
            </form>
            <header>
                <button class="bt" 
                        v-for="produto in produtos" 
                        @click="function(){ mostrar = mostrarBase, categoriaAtiva = produto.categoria }">
                        {{produto.categoria}}
                </button>
                <button class="bt" @click = "categoriaAtiva = ''">todas</button>
            </header>
            <div v-for="produto in produtos" v-if="produto.categoria === categoriaAtiva || categoriaAtiva==='' ">
                <h2>{{produto.categoria}} - R$ {{produto.valor.toFixed(2)}}</h2>
                <div v-if="produto.categoria === categoriaAtiva">
                    mostrando {{mostrar}} de {{produto.itens.length}}
                    <button v-if="mostrar >= (mostrarBase * 2)" class="bt" @click="mostrar -= mostrarBase">-</button>
                    <button v-if="mostrar < produto.itens.length" class="bt" @click="mostrar += mostrarBase">+</button>
                </div>
                <ul>
                    <li v-for="(item,index) in produto.itens" v-if="index < mostrar && produto.categoria === categoriaAtiva || categoriaAtiva===''">
                        {{item.nome}} | {{item.numero}}
                    </li>
                </ul>
            </div>
        </div>
    </main>
    <!-- Scripts -->
    <script src="js/vue-core.js"></script>
    <script src="js/vue-resource.js"></script>
    <script src="js/vue-app1.js"></script>
</body>

</html>

Answer 1

const data = [{
    "categoria": "chaveiro",
    "valor": 17.80,
    "itens": [{
        "nome": "Caveira",
        "numero": 4004
      },
      {
        "nome": "Coração Color",
        "numero": 4005
      },
      {
        "nome": "Coração Tribal",
        "numero": 4006
      },
      {
        "nome": "Bonfim",
        "numero": 4090
      }
    ]
  },
  {
    "categoria": "tag",
    "valor": 13.20,
    "itens": [{
        "nome": "Árvore",
        "numero": 6001
      },
      {
        "nome": "Casa Color",
        "numero": 6002
      },
      {
        "nome": "Caveira",
        "numero": 6004
      },
      {
        "nome": "Coração Color",
        "numero": 6005
      }
    ]
  },
  {
    "categoria": "tagcarro",
    "valor": 9.20,
    "itens": [{
        "nome": "Kombi",
        "numero": 8048
      },
      {
        "nome": "Viagem",
        "numero": 8050
      },
      {
        "nome": "Anjo da Guarda",
        "numero": 8061
      },
      {
        "nome": "Bússola",
        "numero": 8091
      }
    ]
  },
  {
    "categoria": "necessaire",
    "valor": 19.90,
    "itens": [{
        "nome": "Frida",
        "numero": 9013
      },
      {
        "nome": "Olho' Grego",
        "numero": 9024
      },
      {
        "nome": "Kombi",
        "numero": 9048
      },
      {
        "nome": "Unicórnio",
        "numero": 9075
      }
    ]
  }
]


new Vue({
  el: '#app',
  data: {
    produtos: data,
    mostrar: 8,
    mostrarBase: 8,
    categoriaAtiva: null,
  },
  methods: {
//    loadData () {
//      this.$http
//        .get('js/produtos.json')
//        .then(function(res) {
//          this.produtos = res.data;
//        });
//    },
    buscar (busca) {
      console.log(this.busca)
    },
    toggle (category) {
      this.categoriaAtiva = category
    },
    reset () {
      this.categoriaAtiva = null
    },
  },
  mounted: function() {
    this.loadData();
  }
});

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue-resource/1.5.1/vue-resource.min.js"></script>

<main id="app">
  <div class="w1200">
    <header>
      <button class="bt" v-for="(produto, index) in produtos" :key="index" @click="toggle(produto.categoria)">
        {{ produto.categoria }}
      </button>
      <button class="bt" @click="reset">todas</button>
    </header>

    <div v-for="produto in produtos">
      <div class="inner" v-if="produto.categoria === categoriaAtiva">
        <h2>{{produto.categoria}} - R$ {{produto.valor.toFixed(2)}}</h2>
        <div>mostrando {{mostrar}} de {{produto.itens.length}}</div>
        <div>
          <button v-if="mostrar >= (mostrarBase * 2)" class="bt" @click="mostrar -= mostrarBase">-</button>
          <button v-if="mostrar < produto.itens.length" class="bt" @click="mostrar += mostrarBase">+</button>
        </div>
        <ul>
          <li v-for="(item, index) in produto.itens">
            {{item.nome}} | {{item.numero}}
          </li>
        </ul>
      </div>
    </div>

  </div>
</main>

UPD！

根据点击时的搜索热更新v-for循环

1 个答案: