Question

这样我就获得了道具数据：

props: {
  array: {
    type: Array,
    required: true,
  },
},

我必须声明2个数组，第一个数组是标记后的实际数组，第二个数组是在标记前的数组。

所以... 为此，我在方法内部做了类似的事情：

checkExist() {
  const newArray = []
  const arr = this.array[this.counter].splice(1)
  arr.map(el => {
    !newArray.includes(el) ? newArray.push(el) : false
  })
  return newArray
},

所以现在我得到了array[x]没有第一项，它就像一个魅力：D

但是...如果计数器大于0，我将不得不添加一些额外的检查，因此在映射之前，我需要了解数组内部的内容。

this.beforeSelect = this.array[this.counter - 1];

从数组返回索引为0的第一项，因为实际的数组使用了splice（1）。第一项是标题。

那么，现在，如何解决这一问题？

我应该改变它吗？

const arr = this.array[this.counter].splice(1);

但是为了什么？

在没有.splice(1)的情况下，一切正常……但是我需要splice。有什么主意吗？

Answer 1

首先，使用拼接实际上是在突变您要作为道具传递的原始数组。您永远不会想改变孩子的道具。如果要更改作为道具传递的原始数组，则应在父组件中进行。

如果要创建该数组的本地副本，可以使用

<nav id="main-menu">
                <ul>
                    <a href="http://localhost/jorime/">
                        <li>Work</li>
                    </a>
                    <!-- <a href="services"><li>Services</li></a> -->
                    <a href="#">
                        <li id="contact-link">Contact</li>
                    </a>
                </ul>
            </nav>
<section id="contact-wrapper" class="hide">
            <section id="contact-content">
                <section id="contact-close-button">
                    <button>X</button>
                </section>
                <section id="contact-header">
                    <h2>Contact</h2>
                    <p class="importent">Feel free to leave a message!</p>
                </section>
                <section id="contact-body">
                    <form action="">
                        <input type="text" class="contact-form-field" id="contact-form-name"
                            placeholder="Enter your name" />
                        <input type="text" class="contact-form-field" id="contact-form-email"
                            placeholder="Enter your email" />
                        <textarea class="contact-form-field" rows="10" id="contact-form-message"
                            placeholder="Enter your message"></textarea>
                        <section class="flex-right">
                            <input id="contact-form-submit" type="submit" value="submit" />
                        </section>
                    </form>
                </section>
            </section>
        </section>

这将创建一个本地副本，您可以根据自己的喜好对其进行修改，而无需更改原始副本。然后，您可以通过拼接本地副本来继续删除第一个索引。

通过拼接设置数据后道具发生变化

1 个答案: