编辑：

Question

下午好，

我似乎在范围限定的插槽中发生了v模型绑定的问题。

我试图创建一种通用的API表单，该表单将允许我在其中链接任何URL，在作用域内的插槽内添加任何数量和任何类型的DOM元素，并相应地使用从API提取的数据。

到目前为止，我已经设法完成了第一部分-获取数据并将其传递给内部的元素；我现在遇到的问题是由于单向数据流-在<select></select>中选择一个选项似乎并没有相应地更新selectId-而我明白了，这就是它遵循的模式……现在，我该如何解决？

编辑：

如果我将此选择直接复制到组件中（不通过作用域插槽传递）并仅用*（props.selectedId到selectedId）替换props。*，它将正常工作。

因为道具是单向的，所以它不起作用。

<template>
    <form :action="action" :method="method">
        <slot :selectedId="selectedId" :results="results"></slot>
    </form>
</template>

<script>
    export default
    {
        props: ['action', 'method', 'url'],

        data: () =>
        ({
            results: [],
            selectedId: 0,
        }),

        created()
        {
            setTimeout(() =>
            {
                axios.get(this.url).then(response => (this.results = response.data))
            }, 500)
        },
    }
</script>

和HTML：

    <api-form action="/blog" method="POST" url="/api/v1/blog">
        <template slot-scope="props">
            <select class="form-control mb-3" v-model="props.selectedId">
                <option v-for="entry, i in props.results" :value="entry">@{{ entry.title }}</option>
            </select>
            <button class="btn btn-danger">Delete</button>
        </template>
    </api-form>

Answer 1

我的天哪，我一直在这里发帖，然后找到答案。 4个小时的谷歌搜索-什么都没有，然后我在这里发帖，突然想出了解决方案。

对于有相同问题的任何人，这是由于以下事实引起的：所有非组件，如果将$ emit应用于它，则将从<Root>中调用它，这意味着您必须编辑： / p>

created()
{
    this.$on('update:selectedId', (value) =>
    {
        this.selectedId = value
    })
},

并将其更改为此：

created()
{
    this.$root.$on('update:selectedId', (value) =>
    {
        this.selectedId = value
    })
},

Answer 2

您可以将回调作为slot prop传递，也可以将要传递的数据也修改为slot prop，这是我对类似问题v-model and scoped slots not working?

的回答

Vue.js v模型绑定与插槽内的选择框

编辑：

2 个答案: