虾仁A 2022-05-23 11:13 采纳率: 78.8%
浏览 84
已结题

为什么在定义了vant的变量还会报错

问题遇到的现象和发生背景
  <van-search
        placeholder="请输入搜索关键词"
        v-model="value"
        shape="round"
        class="search"
      />

<van-swipe :autoplay="3000">
      <van-swipe-item v-for="(image, index) in state" :key="index">
        <img v-lazy="image" />
      </van-swipe-item>
    </van-swipe>
问题相关代码,请勿粘贴截图
<script >
import { onMounted, reactive } from "vue";
import axios from 'axios';
export default {
  setup () {
    const state = reactive({
      images: [
        'https://img.yzcdn.cn/1.jpg',
        'https://img.yzcdn.cn/2.jpg'
      ]
    });
    onMounted(() => {
      axios.get('http://localhost:3000//banner?type=2').then((res) => {
        console.log(res);
        state.images = res.data.banners
      })
    })
    return {
      state,
      value
    };
  },
};
</script>

运行结果及报错内容
vue.runtime.esm.js?c320:619 
        
       [Vue warn]: Property or method "state" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.

found in

---> <Find> at src/views/Find.vue
       <App> at src/App.vue
         <Root>
[Vue warn]: Property or method "value" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.

found in

---> <Find> at src/views/Find.vue
       <App> at src/App.vue
         <Root>
我的解答思路和尝试过的方法
我想要达到的结果
  • 写回答

3条回答 默认 最新

  • Heerey525 前端领域新星创作者 2022-05-23 11:59
    关注

    使用state包裹value和images使用

    <template>
      <div>
        <van-search
          placeholder="请输入搜索关键词"
          v-model="state.value"
          shape="round"
          class="search"
        />
    
        <van-swipe :autoplay="3000">
          <van-swipe-item v-for="(image, index) in state.images" :key="index">
            <img v-lazy="image" />
          </van-swipe-item>
        </van-swipe>
      </div>
    </template>
    <script>
    import { onMounted, reactive } from "vue";
    import axios from "axios";
    export default {
      setup() {
        const state = reactive({
          value: '',
          images: ["https://img.yzcdn.cn/1.jpg", "https://img.yzcdn.cn/2.jpg"],
        });
        onMounted(() => {
          axios.get("http://localhost:3000//banner?type=2").then((res) => {
            console.log(res);
            state.images = res.data.banners;
          });
        });
        return {
          state
        };
      },
    };
    </script>
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(2条)

报告相同问题?

问题事件

  • 系统已结题 5月31日
  • 已采纳回答 5月23日
  • 创建了问题 5月23日

悬赏问题

  • ¥15 paddleocr运行报错
  • ¥15 怎么用 matlab 设计滞后-超前串联校正网络
  • ¥15 MFC引用C#生成的dll,将dll放置到非exe程序目录,如何操作
  • ¥15 C#创建webservice接口,三方通过多次跳转访问本方服务,获取wsdl文档,wsdl中ip地址为局域网内本机地址而非三方直接访问的地址。
  • ¥15 关于#wireshark#的问题:需要安卓app流量数据集要安卓流量做包序列长度的实验,比如某些流量是在看视频还是在发评论
  • ¥15 Smail语句如何使用判断语句跳过验证卡密界面
  • ¥15 关于#wireshark#的问题:并且能够给数据做标注,如这个流量是在看视频或者是在转账
  • ¥15 运筹优化,gurobi,python
  • ¥20 springmvc重定向和返回json
  • ¥15 电脑键盘实现触摸功能