Not getting the selected value in a Vue component.

Hi all

I am hoping someone can help with this. "Also my approach maybe wrong as I am new to Laravel & Vue."

I have 2 question's / issues's.

First if that I am not getting the selected value from a select/option list.

The second is the when I click on the Add button the record is add but the screen is not refreshing, so how do I refresh a page from within a Vue component?

Here is the code... on the page I am referencing the Vue component with -

<contact-numbers :data="{{ $listing }}"></contact-numbers>.

and here is the Vue component...

Phone / Email / Web: list Choose type...

                <small>Enter: Phone / Email / Web</small>
                <input id="item" class="form-control" required v-model="item">
                    <br>
                        <div class="pull-right">
                            <button type="submit" class="btn btnrow btn-row" @click="addContactNumber">Add</button>
                        </div>
                    <br>
                    <hr>

                    <div v-for="contactNumber in contactNumbers.data">
                       {{ contactNumber.type }}: {{ contactNumber.item }}                          
                    <hr>
                    </div>
                </div>
            </div> 
        </div>
</div>

export default {

    props: ['data'],

    data() {
        return {
            id: this.data.id, 
            slug: this.data.slug, 
            item: '',
            type: '',
            itemTypes: ['Office', 'Mobile', 'Direct', 'Home', 'Email', 'Website'],
            contactNumbers: [
            ]        
        };
    },

    created(){
        axios.get('/contact-number-list/' + this.data.slug)
            .then(({data}) => this.contactNumbers = data);
    },

    methods: {
        addContactNumber() {
            axios.post('/contact-number/create/' + this.data.slug , { 
                id: this.id, 
                item: this.item,
                type: this.type
             })
                .catch(error => {
                    flash(error.response.data, 'danger'); 
                })

                .then(({data}) => {
                    this.item = '';
                    this.type = '';

                    flash('Your contact number has been added.');
                    this.$emit('created', data);
                });
            },
        }       
}

Thank Chris

Juancruzmartino

8 years ago

Level 13

I'm not sure I understand your first question, but I'll answer the second one.

When you send the request in the addContactNumber method, you're making laravel update the database, which is correct.

Now you have three options to make sure the item is added in the page:

Adding it manually after the create POST (if the creation was a success).
Sending the list again on the create POST and updating the component data there.
Make another request after the create POST to get the new list and update it.

Option 3 is the one I'd probably do, it's 1 more post request but seems more correct to me.

ChrisPercival

8 years ago

Level 7

Thanks Jaun

I am not having success get the page to refresh. I have added

this.$emit('refresh'); just after this.$emit('created', data); and then added a post request.

    refresh(){
        axios.post('/user-listings/update/' + this.data.slug)
    },

Is this approach correct?

Juancruzmartino

8 years ago

Best Answer

Level 13

You don't have to actually refresh the page, just update the listing:

methods: {
    refreshList() {
        axios.get('/contact-number-list/' + this.data.slug)
         .then(({data}) => this.contactNumbers = data);
    },
    addContactNumber() {
            axios.post('/contact-number/create/' + this.data.slug , { 
                id: this.id, 
                item: this.item,
                type: this.type
             })
                .catch(error => {
                    flash(error.response.data, 'danger'); 
                })

                .then(({data}) => {
                    this.item = '';
                    this.type = '';

                    flash('Your contact number has been added.');
                    this.$emit('created', data);
                    this.refreshList()
                });
            },
        } 
}

ChrisPercival

8 years ago

Level 7

Thanks Jaun

That did the trick.

So my first question. I have list of itemTypes: ['Office', 'Mobile', 'Direct', 'Home', 'Email', 'Website'],

When I choose one its not updating the type value.

Does this make more sense?

Please or to participate in this conversation.