Hawkey-Chen 2022-01-14 11:21 采纳率: 100%
浏览 16
已结题

vue中,本页面中如何获取products的数据?

问题遇到的现象和发生背景

想直接从页面获取products里面的数据,但是系统一直报products is not defined

问题相关代码,请勿粘贴截图
<template>
  <div class="search">
    <input type="text" placeholder="输入搜索内容" v-model="searchContent">
    <button type="button" @click="search">搜素</button>
    <ul v-for="(booklist) in book">
      <li>{{ booklist }}</li>
    </ul>
  </div>
</template>


<script>
export default {
  name:"search",
  data(){
    return{
      searchContent:"",
      booklist:[],
      book:[],
    products:[
      {name:"世界地图册",price:"$45",number:1001},
      {name:"古埃及历史",price:"$40",number:1002},
      {name:"一千零一夜",price:"$55",number:1003},
      {name:"李清照词传",price:"$25",number:1004},
      {name:"日俄战争纪实",price:"$35",number:1005},
      {name:"白夜",price:"$30",number:1006},
    ],
    }
  },
  methods:{
    search(){
      if(this.searchContent){
        if(!isNaN(parseInt(this.searchContent))){
          for(i in products){
            if(products[i].number == parseInt(this.searchContent)){
              this["book"].push(this.products[i]);
            };
          };
        } else {
          for(i in products){
            if(products[i].name.indexOf(this.searchContent) >= 0){
              this["book"].push(products[i]);
            };
          };
        };
      }else{
        alert("请正确输入筛选条件!")
      };
    }
  },
}
</script>

运行结果及报错内容

img

我的解答思路和尝试过的方法

上网各种搜索,都不符合这样的情况

我想要达到的结果

输入number或者name实现搜索功能

请教一下大家,如何修改代码,才能实现效果?

  • 写回答

1条回答 默认 最新

  • 归来巨星 前端领域新星创作者 2022-01-14 11:25
    关注

    你没有写this.

    <script>
    export default {
      name:"search",
      data(){
        return{
          searchContent:"",
          booklist:[],
          book:[],
        products:[
          {name:"世界地图册",price:"$45",number:1001},
          {name:"古埃及历史",price:"$40",number:1002},
          {name:"一千零一夜",price:"$55",number:1003},
          {name:"李清照词传",price:"$25",number:1004},
          {name:"日俄战争纪实",price:"$35",number:1005},
          {name:"白夜",price:"$30",number:1006},
        ],
        }
      },
      methods:{
        search(){
          if(this.searchContent){
            if(!isNaN(parseInt(this.searchContent))){
              for(i in this.products){
                if(this.products[i].number == parseInt(this.searchContent)){
                  this["book"].push(this.products[i]);
                };
              };
            } else {
              for(i in this.products){
                if(this.products[i].name.indexOf(this.searchContent) >= 0){
                  this["book"].push(this.products[i]);
                };
              };
            };
          }else{
            alert("请正确输入筛选条件!")
          };
        }
      },
    }
    </script>
     
    
    

    img

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论 编辑记录

报告相同问题?

问题事件

  • 系统已结题 1月22日
  • 已采纳回答 1月14日
  • 创建了问题 1月14日

悬赏问题

  • ¥20 iqoo11 如何下载安装工程模式
  • ¥15 本题的答案是不是有问题
  • ¥15 关于#r语言#的问题:(svydesign)为什么在一个大的数据集中抽取了一个小数据集
  • ¥15 C++使用Gunplot
  • ¥15 这个电路是如何实现路灯控制器的,原理是什么,怎么求解灯亮起后熄灭的时间如图?
  • ¥15 matlab数字图像处理频率域滤波
  • ¥15 在abaqus做了二维正交切削模型,给刀具添加了超声振动条件后输出切削力为什么比普通切削增大这么多
  • ¥15 ELGamal和paillier计算效率谁快?
  • ¥15 蓝桥杯单片机第十三届第一场,整点继电器吸合,5s后断开出现了问题
  • ¥15 file converter 转换格式失败 报错 Error marking filters as finished,如何解决?