时间戳

首页 > 解决方案 > 数据中的Vue访问对象

vue.js - 数据中的Vue访问对象

问题描述

我是 Vue 的新手，无法弄清楚以下内容。我有一个应用程序通过一个连接到 JSON ApiusePage()

usePage()让我使用“ page”作为我可以在标签内使用和访问的对象。

喜欢：

<p>This product costs {{page.price}} Euros and is {{page.width}} wide and {{page.colour}}</p>

但是，我page也可以在data()or中访问这个“”对象methods:吗？

喜欢：

export default {
  components: {
    …
  },
  
  // Vue 3 setup
  setup () {
    return {
      page: usePage(),
    }
  },
  
  data: function() {
    return {
      product: {
        price: this.page.price,
        width: this.page.width,
        colour: this.page.colour
      }
    };
  }
}

它似乎返回未定义。在 Vue 中是否不可能访问标签外的相同对象而<template>不是标签内的对象<template>？

感谢您的任何提示！

标签： vue.jsvuejs3

解决方案

您不应该在设置和其他选项（如数据、方法...）之间交换属性，在您的情况下，您可以使用计算属性而不是数据选项：

import {computed} from 'vue'

export default {
  components: {
    …
  },
  
  // Vue 3 setup
  setup () {

   const page = usePage();
   const product= computed(()=>({
        price: page.price,
        width: page.width,
        colour: page.colour
      }))
    return {
      page,product
    }
  },
  
 
}

推荐阅读