How can I send property to value of input text ? (Vue.JS 2)

Question

My component is like this :

<template>
    <div class="modal" tabindex="-1" role="dialog">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <form id="form-message">
                    ...

                    <input type="text" class="form-control" id="subject" placeholder="Subject" v-model="product_name" required>
                    ...   
                </form>    
            </div>
        </div>
    </div>         
</template>

<script>
    export default {
        name: 'MessageModal',
        props: ['productName'],
        data() {
            return {
                product_name: this.productName,
            }
        }
    }
</script>

This component is a modal. This modal showed when click a button. When the modal component showed, I want send value of product_name property to value of input text

I try like above code, but the input text not display value of product_name property

If I put input text out the form like this :

<input type="text" class="form-control" id="subject" placeholder="Subject" v-model="product_name" required>
<form id="form-message">
    ...
</form>

It works. But why If I put input text in the form, it does not work?

How can I solve it?

@Bert Evans, If I put input text out the form, it works. But why If I put input text in the form, it does not work? — moses toh
– moses toh, Commented Mar 8, 2017 at 20:28
It's possible there's some other library on the page that clears form inputs in certain cases? I don't think it's a Vue issue. — Bert
– Bert, Commented Mar 8, 2017 at 20:37
@Bert Evans, Look at this : jsfiddle.net/oscar11/d3jecL8n/5. It does not work — moses toh
– moses toh, Commented Mar 8, 2017 at 21:03

peaceman · Accepted Answer · 2017-03-08 19:44:34Z

1

I would do it like this:

<template>
...
    <input type="text" class="form-control" id="subject" placeholder="Subject" v-model="pname" required>
...                
</template>

<script>
  export default {
    mounted() {
      this.pname = this.productName
    },
    props: ['productName'],
    data() {
        return {
            pname: "",
        }
    }
  }
</script>

This way when component is mounted you set prop to internal data property pname of component and bind value of input field with pname.

answered Mar 8, 2017 at 19:44

peaceman

1,72113 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

moses toh Over a year ago

It does not work. You try see my question. I had update it

Collectives™ on Stack Overflow

How can I send property to value of input text ? (Vue.JS 2)

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related