在 <template> 处调用 Vue.js 3 中的函数

许先生

我正在学习如何获取 API 并在 Vue.js3 的网页中显示它的数据,这个想法是显示品种,当用户按下其中一个品种时,它只显示一个随机的狗图像。但是由于某种原因,当我调用该函数时,fetchAPI()它给了我这个错误:在此处输入图片说明

但是当我将它分配给一个变量fun并调用该变量时,它会起作用,这是为什么?这是我的代码:

<template>

  <div class="dog"> 
  <ul class="dog__ul">
      <li class="dog__li" v-for="(value, name) in data.message" :key="name"
      @click="fun" 
//If I put `fetchAPI()` instead of "fun" it throghs an error
      >
      {{ name }} 
      </li>
  </ul>
    <img :src="image"  alt="dog picture" class="dog__img"> 
  </div> 
</template> 
 
<script>
import { ref , onMounted, onUnmounted } from 'vue';
export default { 
 
  setup(){
    const data = ref({});
    let image = ref(null);
    
    let fun = fetchAPI; 
    function  fetchList(){ 
      fetch("https://dog.ceo/api/breeds/list/all")
        .then(response => response.json()) 
        .then(info=>data.value = info)
        .catch(err => console.log (err.message))
    }
      function fetchAPI(){ 
      fetch(`https://dog.ceo/api/breeds/image/random`)
        .then(response => response.json()) 
        .then(val=>image.value = val.message)
        .catch(err => console.log (err.message))
    }
    onMounted(() => {
      console.log ("Mount : DogAPI  Mounted ⭕");
      fetchAPI();    
      fetchList(); 
       
    });
    onUnmounted(() => console.log("unMount: DogAPI Unounted ❌ "));
    return {
      data,
      image,
      fun,
      
    }
  }
  
}; 
</script>
泛光灯世界

如果您从 setup() 函数显式返回它,则只能在模板中使用/调用变量/函数。

因此,您需要将代码更改为:

return {
  data,
  image,
  fun,
  fetchAPI
}

让它按您的意愿工作。

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

脚本标记中的vue.js 3单个文件组件的调用方法

在vue js中的v-checkbox onchange事件中调用两个函数

在Vue.js模板中调用函数

Vue组件中未调用Vue.js ready()方法

使用Vue.js在其他函数中调用onclick函数

Vue.js:在vue.config.js中定义计算的环境变量(Vue CLI 3)

在更改时从js调用vue函数

在Leaflet和Vue.js中创建的Select中,在函数事件(onChange)中调用函数

如何调用我的Vue.js插件中声明的函数

在Vue.js中,如何从Google Maps click事件中调用函数?

在vue.js中重新渲染之前的问题函数调用

在Vue.js中调用函数后,清除vue-google-autocomplete组件输入字段

Vue.js 3 this。$ root。$ on不是函数

Vue.js从外部js文件调用异步函数

Vue JS-如何在JavaScript的过滤器函数中调用数据

如何从Vue 3中的设置调用prop函数

函数调用时d3.js中的任意变量

vue.js 外部库函数在组件中调用

如何在 VUE.js 方法中使用函数中的参数调用函数?

在html中调用vue.js函数打印p标签中的值

vue.js 调用外部 js 函数进行搜索

v-slot 中的函数调用,vue.js

Vue js 问题从 API 中调用 url

Vue JS - 返回后调用函数

Vue2 js滚动调用函数

_firebase_config__WEBPACK_IMPORTED_MODULE_3__.default.createUserWithEmailAndPassword 不是 Vue Js 中的函数

调用挂载中的方法 - Vue.JS

每当在 Vue.js 3 中单击未知的锚标记时,如何运行函数?

JS + Vue3:模态对话框:调用函数返回的参数化函数