在v-for循环中创建虚拟变量

huangapple go评论64阅读模式
英文:

Creating Dummy Variables in v-for Loops

问题

我正在使用Vue-JS,并遇到了与v-for循环和v-model属性有关的问题。

我有一个项目列表

<input
  v-for="i in list"
  v-model="i.model"
  ... (其他使用i的标签)
></input>

以及一些相应的JavaScript

let model_thing = ref();

let list = [
  { model: ref(), data: "无论什么东西" },
  { model: model_thing, data: "..." }, //我也尝试过类似这样的方式,在列表之外创建了ref()
]

但问题是v-model根本不起作用。我相当确定这是因为引用变量在数组中。

我认为我有一种解决方法;这是一个有点糟糕但仍然是解决方法。

页面加载后,我实际上不需要v-model(以及Vue实际上知道输入框内应该有什么内容)。

那么如果我可以在v-for循环内创建一个“虚拟”变量呢?

<input
  v-for="i in list"
  v-model="let dummy = ref(); /* 将'dummy'用作引用"
  ... (其他内容)
></input>

我正在使用的UI框架也有点没有文档(称为Maz-UI),所以我不能像这样轻松解决问题:

<!-- 我现在使用选择下拉框而不是之前的输入框 -->
<MazSelect
  v-for="i in list"
  :value="i.model"
  @input="i.model = $event.target.value"
>
</MazSelect>

因为这只会给我[object, Object],并且占位文本仍然显示。

有人能告诉我如何创建这样的虚拟变量吗?

英文:

I am using Vue-JS and am running into an issue with v-for loops and v-model properties.

I have a list of items

&lt;input
  v-for=&quot;i in list&quot;
  v-model=&quot;i.model&quot;
  ... (other tags that use i)
&gt;
&lt;/input&gt;

And some corresponding JavaScript

let model_thing = ref();

let list = [
  { model: ref(), data: &quot;Whatever things&quot; }
  { model: model_thing, data: &quot;...&quot; }, //I also tried something like this, where ref() is created outside of the list
]

But the issue is that the v-model simply doesn't work. I'm pretty sure this is due to the reference variable being in an array.

I think I have a way to solve this; it is a bit of a bad solution but a solution nonetheless.
I don't really need the v-model after the page has loaded (and for Vue to actually know what the input should have inside it).

So what if I could create a "dummy" variable inside the v-for loop?

&lt;input
  v-for=&quot;i in list&quot;
  v-model=&quot;let dummy = ref(); /* use &#39;dummy&#39; as the ref&quot;
  ... (whatever else)
&gt;
&lt;/input&gt;

The UI framework I'm using is also a bit undocumented (Known as Maz-UI), so I can't just pull a solution like this:

&lt;!-- I am using select dropdowns instead of inputs like before --&gt;
&lt;MazSelect
  v-for=&quot;i in list&quot;
  :value=&quot;i.model&quot;
  @input=&quot;i.model = $event.target.value&quot;
&gt;
&lt;/MazSelect&gt;

As this is just giving me [object, Object] and the placeholder text is still showing.

Can someone tell me how to create dummy variables like this?

答案1

得分: 1

正如评论中所提到的,你使用 v-model 的方式没有问题。所以我猜想,将其包裹在 reactive 中应该可以工作:

let model_thing = ref();

let list = reactive([
  { model: ref(), data: "一些内容" },
  { model: model_thing, data: "..." }, //我也尝试过这样的方式,在列表之外创建了 ref()
])

请注意,由于reactive 的工作方式,你也可以摆脱中间的 ref

let list = reactive([
  { model: undefined, data: "一些内容" },
  { model: undefined, data: "..." }, //我也尝试过这样的方式,在列表之外创建了 ref()
])

通常来说,创建临时变量通常不是一个好主意。为什么呢?因为它不是响应式的,这意味着 v-model 的一部分将会有用:绑定部分。

也就是说,你设想的方式也是不可能的,因为Vue的JS编译器只允许表达式(而不是语句)。

你可以使用文字、函数调用等,但不能创建一个适当的变量,可以说是这样。

因为这两个原因,我认为你不能动态创建 ref。正如指出的,当你遇到这种复杂的情况时,通常意味着你需要重构或细分。

你的问题确实引发了数据建模中的一个有趣问题:纵向(多个数组)与横向分组(一个对象数组)。

英文:

As mentioned in the comments, there's nothing wrong with how you use v-model. So my guess is that it'd work when wrapped inside a reactive:

let model_thing = ref();

let list = reactive([
  { model: ref(), data: &quot;Whatever things&quot; }
  { model: model_thing, data: &quot;...&quot; }, //I also tried something like this, where ref() is created outside of the list
])

Note that due to how reactive works, you can also get rid of intermediary refs:

let list = reactive([
  { model: undefined, data: &quot;Whatever things&quot; }
  { model: undefined, data: &quot;...&quot; }, //I also tried something like this, where ref() is created outside of the list
])

Creating a temporary variable is usually a bad idea. Why? It's not reactive, meaning that only one part of the v-model would be useful: the binding part.

That said, the way you envisioned it is also impossible since Vue's JS compiler for binds only allows expressions (and not statements).

You can use literals, function calls, etc. but you can't create a proper variable, so to speak.

For these 2 reasons, I don't think you can create refs on the fly. And as pointed out, when you reach such complex cases it's usually a sign that you need to refactor or subdivide.

Your issue does raise an interesting issue in data modelling: vertical (multiple arrays) vs horizontal grouping (one array of objects).

huangapple
  • 本文由 发表于 2023年7月10日 21:45:56
  • 转载请务必保留本文链接:https://go.coder-hub.com/76654377.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定