vuejs "TypeError: Невозможно использовать оператор 'in' для поиска

Question

У меня есть поле ввода, и пользователь должен указать свой идентификатор пользователя Facebook, поэтому я делаю поле ввода со значением по умолчанию 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

v-model нужна переменная для привязки, а не фиксированная строка.

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

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

Если вы делаете какие-либо запросы к этой ссылке, вы, вероятно, не должны позволять пользователю манипулировать ею свободноно поставьте на место охрану, чтобы вы не отправляли запросы на предоставленный пользователем URL-адрес вслепую.

Answer 2

привязка только для переменных, используйте это работает

<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