Question

我正在为我的第一个应用程序寻求帮助，因为我是VUE的新手，所以我希望有很多我不知道的地方。我通过改编我作为课程一部分的教程来开始这个项目，不幸的是，我试图达到的目标并未在课程中详述。

我创建了一个简化的测试用例，以尝试使基本功能正常工作（在下面链接）。 https://codepen.io/christopherduffy/pen/bJWRJm

在这种情况下，我在v-for循环中为“ quoteValues”数组中的每个对象显示按钮。当我单击按钮时，数组中该索引处的对象的对象值将记录到控制台。

理论上，要将内容添加到DOM，单击的按钮将调用一种方法来发出与“ quoteValues”数组中的对象索引匹配的值。然后，我使用v-for循环显示“引号”数组中的所有引号，应将所选匹配值添加到该数组中。至少这是我的理解。

我遇到很多麻烦的是，连接到事件监听器“ quoteAdded”的“ newQuote”方法没有按预期被调用。快速说明，在创建测试用例之前，我已将每个组件注册在其自己的component.vue文件中，该方法将触发，但我不能发出多个值。

简而言之，我想要实现的结果是，与单击按钮的索引匹配的值显示在“ app-quote”组件中的HTML中，如以下示例所示。尝试使自己了解所有插槽以及如何向特定插槽添加特定值也很困难。

<div>
 <h3>added quote</h3>
 <p data-id="1">quote id: 1</p>
 <p>quote name: one</p>
</div>

基本上，如果有人可以指导我我做错了什么或向正确的方向指出（请记住我是VUE的新手），我将不胜感激。

Answer 1

您的事件命名遇到了问题。有关原因，请参见此处的文档：https://vuejs.org/v2/guide/components-custom-events.html。基本上，当您发出fooGoo时，您无法通过fooGoo正确地监听它。甚至是foo-goo。我在这里修改了您的笔：https://codepen.io/cfjedimaster/pen/PgmxPp?editors=1111。请注意，我是如何简化事件名称的。

来自组件：

this.$emit('quoteadded', this.quoteValues[index]);

在标记中：

<app-new-quote v-on:quoteadded="newquote"></app-new-quote>

Answer 2

我刚刚编写了您的代码，并且收到了此消息

<?php
print_r($_POST);
$idoc = isset($_POST['idoc']) ? $_POST['idoc'] :  1;                        
echo  $idoc;
$query =  "SELECT * FROM ocorrencia where id=$idoc";
echo $query;
$result1 = mysqli_query($conn, $query);                     
while ($row = mysqli_fetch_assoc($result1)): ?>
    <p class="data"><?php echo $row['data']; ?></p>
    <p class="sala"><?php echo $row['sala']; ?></p>
    <textarea readonly id="descricao"><?php echo $row['descricao'];?></textarea>
<?php endwhile; ?>

需要帮助将值发射到VUE中的父组件

2 个答案: