将 props 对象传递给 Vue 组件，同时保持属性的反应性答案

【问题标题】：Passing props object to Vue component while keeping the properties reactive将 props 对象传递给 Vue 组件，同时保持属性的反应性
【发布时间】：2020-06-10 09:49:05
【问题描述】：

我正在使用 Vue 和 Laravel。
我正在尝试在数据库中定义一个维度对象，然后通过道具将值传递到组件中，同时保持对象属性的反应性。

数据库包含一个定义定义名称和尺寸的对象。维度可以是来自商店的简单值（作为项目 0），也可以是对这些值的计算（作为项目 1）。商店中的值由页面上的其他表单输入组件设置。

数据库表“item”，列“dimensions”：

"{
     0:  {name: 'item0',
          size: {
                x: 'this.storeState.h.dim',
                y: 'this.storeState.w.dim',
                z: 'this.storeState.d.dim'
          }
     },
     1:  {name: 'item1',
          size: {
                x: 'this.storeState.h.dim - this.storeState.offset1.dim',
                y: 'this.storeState.w.dim + this.storeState.offset2.dim',
                z: 'this.storeState.d.dim + 100'
          }
     }
 }"

laravel 刀片模板将 props 传递给 vue 组件。 show.blade.php：

<my-component :dimensions="{{$item->dimensions}}">
</my-component>

在 my-component.Vue 内部：

<script>
import { store } from "../../store.js";

export default {
    data() {
        return {
            storeState: store.state
        };
    },
    props: ["dimensions"],
    methods: {

        defineItems: function() {
            return this.dimensions; 
        }
</script>

我的问题是对象属性以字符串的形式出现，并且不是响应式的。我是一个相对初学者，这可能很明显，但是在这种情况下使用什么架构合适呢？我可以将变量名称存储在对象中（例如“h”），然后在组件中重新构建变量的完整位置，但我不确定如何处理对象包含计算的情况多个变量（如第 2 项）。

当对象在组件内部定义时它可以工作，但我想让组件可重用。在带有本地定义对象的 my-component.Vue 中：

<script>
import { store } from "../../store.js";

export default {
    data() {
        return {
            storeState: store.state
        };
    },
    methods: {

        defineItems: function() {
            var dimensions = {
            0: {
                name: "item0",
                size: {
                    x: this.storeState.h.dim,
                    y: this.storeState.w.dim,
                    z: this.storeState.d.dim
                }
            },
            1: {
                name: "item1",
                size: {
                    x: this.storeState.h.dim - this.storeState.offset1.dim,
                    y: this.storeState.w.dim + this.storeState.offset2.dim,
                    z: this.storeState.d.dim + 100
                }
            }
        };
        return dimensions; 
    }
</script>

感谢您提供有关如何处理此问题的任何指示...

【问题讨论】：

在您的项目示例中，是直接从数据库输出吗？看来您正在数据库中保存代码字符串..？
是的。我现在只是在播种数据库。我正在使用 laravel 模型来转换为数组，但为了在短期内简化问题而将其关闭。我不确定如何在不存储代码的情况下将“配置”保存在数据库中。
您最好存储实际值而不是对它们的引用。然后你填充一个包含所述数据的对象并将该对象简单地传递给前端。
非常感谢您的帮助。只是为了检查我理解......在数据库中我可以存储大小：{ x：'height'，y：'width'，z：'depth'}，然后将其传递给前端，并查找当前值高度、宽度和深度？在这种情况下，处理例如 x: 'height + offset1' 的最佳方法是什么。对于更多背景知识，该组件是 three.js 代码，它根据某些表单输入传递的尺寸实时更新渲染。
我认为我们互相误解了。我正在设置一个“配置”对象，它需要存储渲染的“配方”。实际值（数值尺寸）在页面渲染之前是未知的，并且在那个阶段被 Vue 替换。这可能有一个模式，但我不知道！为了以防万一，我在问题中添加了三个.js 标记。

标签： laravel vue.js

【解决方案1】：

我构建了一个小提琴来了解为什么这不起作用。
JSFiddle

最后，这是我的商店模式的问题，商店在根 Vue 实例上不存在。这是来自 JSFiddle 的根实例上的存储。

new Vue({
  el: "#app",
  data: {
    store: {
      x: 500,
      y: 400,
      z: 10
    }
  }
})

【讨论】：