The unique text: "User-defined input element disregards changes initiated through

Question

The unique text: "User-defined input element disregards changes initiated through

I created a custom input component that functions correctly, but I have encountered an issue. When I attempt to update the value through a method, the model gets updated but the input value remains unchanged.

Here is my component: https://codepen.io/ken-ramirez/pen/JgyKad

const BasicInput = {
  template: '<input v-model="content" @input="handleInput" />',
  prop: ['value'],
  data () {
    return {
      content: this.value
    }
  },
  methods: {
    handleInput (e) {
      this.$emit('input', this.content)
    }
  }
}

new Vue({
  el: '#app',
  data: { name: '' },
  components: { BasicInput },
  methods: {
    restart() {
      this.name = ''
    }
  }
})

You can click on the restart button to see the issue in action.

javascript vue.js vuejs2 binding vue-component

Answer 1

Answer №1

Your code contains an error: you should be using `props` instead of `prop`.

Additionally, it is necessary to manually update the `content`, as it is not reactive with the `value` prop. Any variables declared inside `data` are not automatically reactive with their initial values.

const BasicInput = {
  template: '<input v-model="content" @input="handleInput" />',
  props: ['value'],
  data () {
    return {
      content: this.value
    }
  },
  methods: {
    handleInput (e) {
      this.$emit('input', this.content)
    }
  },
  watch: {
    value(val) {
      this.content = val;
    }
  }
}

Answer 2

Your code contains an error: you should be using `props` instead of `prop`.

Additionally, it is necessary to manually update the `content`, as it is not reactive with the `value` prop. Any variables declared inside `data` are not automatically reactive with their initial values.

const BasicInput = {
  template: '<input v-model="content" @input="handleInput" />',
  props: ['value'],
  data () {
    return {
      content: this.value
    }
  },
  methods: {
    handleInput (e) {
      this.$emit('input', this.content)
    }
  },
  watch: {
    value(val) {
      this.content = val;
    }
  }
}

Answer 3

Answer №2

As pointed out by @NikitaK in his response, there is a typo in your code where you have used prop instead of props. Here's a simpler solution without utilizing the watcher property, just by using this line of code:

@input="$emit('input',$event.target.value)"

Complete example

const BasicInput = {
  template: `<input :value="value" @input="$emit('input',$event.target.value)" />`,
  props: ['value']

}

new Vue({
  el: '#app',
  data() {
    return{
      name: ''
    }},
    components: { BasicInput },
    methods: {
      restart() {
        this.name = ''
      }
    }
})

body {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>

<div id="app">
  <basic-input v-model="name"></basic-input>
  <p>
    <strong>Name:</strong> {{ name }}
  </p>
  <button @click="restart">restart</button>
</div>

Answer 4

As pointed out by @NikitaK in his response, there is a typo in your code where you have used prop instead of props. Here's a simpler solution without utilizing the watcher property, just by using this line of code:

@input="$emit('input',$event.target.value)"

Complete example

const BasicInput = {
  template: `<input :value="value" @input="$emit('input',$event.target.value)" />`,
  props: ['value']

}

new Vue({
  el: '#app',
  data() {
    return{
      name: ''
    }},
    components: { BasicInput },
    methods: {
      restart() {
        this.name = ''
      }
    }
})

body {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>

<div id="app">
  <basic-input v-model="name"></basic-input>
  <p>
    <strong>Name:</strong> {{ name }}
  </p>
  <button @click="restart">restart</button>
</div>

The unique text: "User-defined input element disregards changes initiated through

Answer №1

Answer №2

Similar questions

Trigger Object RuntimeError

removing vue dynamic component before it is destroyed

How can we add styles to text entered into a form input field in a targeted way?

The POST function in jQuery often returns the [Object object] result

What methods are available for integrating ArcGIS JS into Vue.js?

Obtain the value from the controller of the amazing-rating component

Is there any HTML code that is able to implement a currency format identical to the one we've customized in Google Sheets/Google Apps Script

Issue with refreshing a material

Drag and drop non-event elements onto events using jQuery FullCalendar

How can one access a client instance that has been generated using the $create method in ASP.NET AJAX?

What could be causing my problem with the add function?

Tips for preventing window.location from becoming relative to the file

Utilizing JavaScript to retrieve data using AJAX

What could be causing the issue with lodash throttle not functioning correctly in the useWindowSize custom hook?

V-Calendar is not displaying the accurate dates

Understanding the scope within a .when .done function in jQuery

Building a loading spinner component in a react-native project

Showing the unique identifier instead of the actual data in HTML for a Firebase Object using Angularfire

Achieve Dual Functionality with Vue.JS Button within a Parent Element

What is the process for sending a selected option using AJAX?