将 Vue.JS 道具发送到 JavaScript 函数时出现问题

Posted 2023-02-22

【中文标题】将 Vue.JS 道具发送到 JavaScript 函数时出现问题

【英文标题】：Problems sending a Vue.JS prop to a JavaScript function

【发布时间】：2021-11-01 17:00:03

【问题描述】：

我正在开发一个使用 Vue.JS 的项目。我有一个组件，其中包括一个按钮、文本和一个允许我在其中插入更多组件的插槽。这个组件获得了一些道具。

当我使用 onclick 按下按钮时，我想向 javascript 函数发送一个道具（一个 ID）。发生这种情况时，具有该 id 的 div 将隐藏或显示（使用 JQuery 的 toggle() 函数）。如果我在代码中指定了 id，就会发生这种情况，但如果我使用具有相同值的 prop 值，它就不起作用。这是我使用的代码：

这些是道具：

props: 'obraName': String, 'idValue': String,

这是按钮所在组件的模板，通过 onclick，我执行 JavaScript 的函数，将 prop 作为参数发送：

<div :style="style">
      <label :style="text">obraName</label>
      <!-- If I change this.idValue with a number, it works -->
      <button onclick='toggleListShow(this.idValue)'>x</button> 
      <div :style="text"><slot></slot></div>
</div>

这是 JavaScript 函数，使用 JQuery：

function toggleListShow(id) 
    $('#obra' + id + " div").toggle()

最后，我使用 php 回显声明组件。我将其他组件放入插槽中，然后将其关闭。这里我声明了 id（将是 obra + id 的 obra）和 prop id-value（这只是 obra 的 id）：

echo "<obra obra-name=".$obra['name']." id=".'obra'.$obra['id']." id-value=".$obra['id'].">";

我花了几个小时试图解决这个问题，如果您能帮助我找到不允许我将 idValue 道具（在 PHP 中称为 id-value）发送给我的错误，我将非常感激JavaScript 函数。

谢谢！

【问题讨论】：

我也是 vuejs 的新手。所以我不确定解决方案。但试试这样 x

嘿！谢谢你这么快回答。这应该是个好主意，但现在，当我尝试时，我收到了这个：TypeError: toggleListShow is not a function. (In 'toggleListShow(idValue)', 'toggleListShow' is undefined)。函数 toggleListShow(id) 在 JavaScript 文件中声明。

toggleListShow 函数是否在 vue 方法中？

不，不是。函数 toogleListShow() 位于名为 app.js 的 JavaScript 文件中。组件在名为 components.js 的 JavaScript 文件中声明。

我建议您在toggleListShow 中打印一些信息，以确保您确实获得了id 和$('#obra' + id + " div") 确实存在并且正是您想要切换的元素。所以，在toggleListShow 中尝试console.log(id, $('#obra' + id + " div").length, $('#obra' + id + " div").html());。

【参考方案1】：

<div :style="style">
  <label :style="text">obraName</label>
  <button @click="toggleListShow(idValue)">x</button> 
  <div :style="text"><slot></slot></div>
</div>

当你在模板部分时，你不需要使用“this”。

【讨论】：

好的，谢谢！

这并没有解决我的问题，我在 cmets 上解释了原因。 ^^