Question

vuejs“TypeError：无法使用‘in’运算符来搜索

2019-07-05

4896

laravel vuejs2

我有一个输入框，用户必须在其中提供他们的 Facebook 用户 ID，因此我使用默认值创建输入框 https://www.facebook.com ，然后用户提供他们的用户个人资料链接，然后它将更新数据，但是当我在输入框中输入任何内容时出现此错误

<div class="column">
  <label class="label">Facebook Id::</label>
  <input class="input is-medium" type="text" v-model="'https://www.facebook.com/'+data.fblink">
</div>

<script>
    import contactInfo from './ContactInfo'

    export default {
        components: {contactInfo},
        props: ['data'],

Answer 1

绑定仅适用于变量，使用它可以工作

<div class="column">
  <label class="label">Facebook Id::</label>
  <input class="input is-medium" type="text" v-model="facebook_link">
</div>

在您的数据变量中添加 facebook_link 作为字符串。然后如果您想更新使用这个

'https://www.facebook.com/'+facebook_variable

Answer 2

v-model 需要绑定一个变量，而不是一个固定的字符串。

...
 <input v-model="fbProfileLink"/>
...

export default {
    components: {contactInfo},
    props: ['data'],
    data() {
      return {
        fbProfileLink: 'https://www.facebook.com/'
      }
    }
}

但是，如果您向该链接发出任何请求，则可能不应该让用户自由操作它，而应该设置保护措施，这样您就不会盲目地向用户提供的 URL 发出请求。