虾仁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日

悬赏问题

  • ¥50 关于#html5#的问题:H5页面用户手机返回的时候跳转到指定页面例如(语言-javascript)
  • ¥15 无法使用此凭据登录,因为你的域不可用,如何解决?(标签-Windows)
  • ¥15 yolov9的训练时间
  • ¥15 二叉树遍历没有报错但无法正常运行
  • ¥15 在linux系统下vscode运行robocup3d上场球员报错
  • ¥15 Python语言实验
  • ¥15 SAP HANA SQL 增加合计行
  • ¥20 用C#语言解决一个英文打字练习器,有偿
  • ¥15 srs-sip外部服务 webrtc支持H265格式
  • ¥15 在使用abaqus软件中,继承到assembly里的surfaces怎么使用python批量调动