时间戳

首页 > 解决方案 > 如何在模板中使用返回值的函数？Vuex, Vue

javascript - 如何在模板中使用返回值的函数？Vuex, Vue

问题描述

我正在使用模板来获取 json 文件的数据，我使用“v-for”来打印所有数据，例如：

template: /*html*/
    ` 
    <div class="col-lg-8">
        <template v-for="item of actividades">
            <ul>
                <li>{{ item.date }}</li>
            <ul>
        </template>
    </div>
    `,

但我需要使用函数 year() 来修改这些信息并返回和结果，例如：

   template: /*html*/
    ` 
    <div class="col-lg-8">
        <template v-for="item of actividades">
            <ul>
                <li>{{ year(item.date) }}</li>
            <ul>
        </template>
    </div>
    `,

值 {{ item.date }} 打印“2021-01-20”，但我希望使用函数 {{ year(item.date) }} 打印“2021”

使用javascript编写函数year()：

year(date){
            return String(date).substr(0, 4);
        }

我尝试使用该代码但无法正常工作，出现此错误： 此图像显示错误

那是我的javascript代码：

//VueEx
const store = new Vuex.Store({
    state: {
        actividades: [],
        programas: [],
        year: ""
    },
    mutations: {
        llamarJsonMutation(state, llamarJsonAction){
            state.actividades = llamarJsonAction.Nueva_estructura_proveedor;
            state.programas = llamarJsonAction.BD_programas;
        },
        yearFunction(state, date){
            state.year = String(date).substr(8, 2);
            return state.year;
        }
    },
    actions: {
        llamarJson: async function({ commit }){
            const data = await fetch('calendario-2021-prueba.json');
            const dataJson = await data.json();
            commit('llamarJsonMutation', dataJson);
        }
    }
});

//Vue
new Vue({
    el: '#caja-vue',
    store: store,
    created() {
        this.$store.dispatch('llamarJson');
      }
});

标签： javascriptvue.jsvuex

解决方案

在模板中，您可以使用定义为methods或的函数computed。从技术上讲，您也可以使用data将函数传递给模板，但我不推荐它。并不是说它不起作用，但是 Vue 使任何声明为data响应式的，并且使一个函数（基本上是一个常量）响应式没有意义。所以，在你的情况下：

new Vue({
  el: '#app',
  data: () => ({
    actividades: [
      { date: '2021-01-20' },
      { date: '2020-01-20' },
      { date: '2019-01-20' },
      { date: '2018-01-20' },
      { date: '2017-01-20' }
    ]
  }),
  methods: {
    year(date) { return date.substring(0, 4); }
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <ul>
      <li v-for="(item, key) in actividades" :key="key">
        {{ year(item.date) }}
      </li>
  </ul>
</div>

如果由于某种原因，您想传递year为computed：

computed: {
  year() { return date => date.substring(0, 4); }
}

但它是一个复杂的构造（一个返回内部箭头函数的 getter 函数），这种复杂性没有任何用途。我建议您method在您的情况下使用 a ，因为它是最直接的（易于阅读/理解）。

如果您year从另一个文件导入函数：

import { year } from '../helpers'; // random example, replace with your import

// inside component's methods:

methods: {
  year, // this provides `year` imported function to the template, as `year`
        // it is equivalent to `year: year,`
  // other methods here
}

旁注：

  • 遍历<template>包含<ul>'s 的标签是没有意义的。您可以将 v-for 直接放在 the 上<ul>并丢失<template>（您应该只<template>在您想要应用一些逻辑时使用 - 即：a v-if- 到一堆元素而不实际将它们包装到 DOM 包装器中；另一个用例是当您希望其子代是其父代的直接后代：对于<ul>/<li>或<tbody>/<tr>关系，它们之间不能有中间包装器）。在您的情况下，将 放在v-for上<ul>会产生完全相同的结果，但代码更少。
  • 你应该总是key你v-for的：<ul v-for="(item, key) in actividades" :key="key">。Keys 帮助 Vue维护列表元素的状态，跟踪动画并正确更新它们

推荐阅读