ajsmith_codes
1 week ago
110
3
Vue

Is there a way to set a value and pass with @click to vue component?

Posted 1 week ago by ajsmith_codes

I have a view that lists phone numbers and is populated by an array. When a user clicks on Edit for a particular phone number, I want to pass the phone's id to a vue instance. Is this possible?

Here is the view button, and I'm not certain how to set the value of the phone id.:

 <a href="/phone/edit"
                                   id="phone"
                                   @click.prevent="$modal.show('edit-phone')">
                                    Edit</a>

And here is where I call the modal in my view:

<edit-phone-component
    :customer="{{ $customer->id }}">
</edit-phone-component>

And here is the vue component:

New Phone Number

    <div
        id="edit-phone"
        class="text-center">
        <form
            @submit.prevent="handleSubmit">
            <div
                v-if="errors.length">
                <div
                    class="text-red-700 ml-6">
                    <ul>
                        <li v-for="error in errors">
                            {{
                            error
                            }}
                        </li>
                    </ul>
                </div>
            </div>

            <div
                class="flex">
                <div
                    class="flex-1 m-4">
                    <div
                        class="mb-4">

                        <label

                            class="text-sm block mb-2">
                            Phone
                            Type
                        </label>

                        <select
                            class='form-control shadow'
                            v-model='type'
                            id="type">
                            <option
                                value='0'
                                disabled>
                                Select
                                Type
                            </option>
                            <option
                                v-for='type in types'
                                :value='type.type'>
                                {{
                                type.type
                                }}
                            </option>
                        </select>

                    </div>
                    <div
                        class="mb-4">
                        <label>
                            Number
                        </label>
                    </div>
                    <div
                        class="mb-4">
                        <input
                            type="text"
                            class="shadow"
                            v-model="phone"
                            id="phone"
                            value="phone"
                        />
                    </div>
                    <div
                        class="mb-4">
                        <label>
                            Extension
                        </label>
                    </div>
                    <div
                        class="mb-4">
                        <input
                            type="text"
                            class="shadow"
                            v-model="extension"

                        />
                    </div>

                    <div
                        class="mb-4">

                        <button
                            class="button-blue"
                            type="submit">
                            Submit
                        </button>
                    </div>
                </div>
            </div>
        </form>
    </div>
</modal>
export default { data: function () { return { type: 0, types: [], extension: '', phone: '', errors: [], modalShow: true }; }, methods: { handleSubmit: function (e) { if (this.type && this.phone && this.extension) {
                axios.post('/phone/store', {
                    type: this.type,
                    extension: this.extension,
                    vendor: this.vendor,
                    customer: this.customer
                })
                    .then((response) => {
                        $('#success').html(response.data.message)
                        this.modalShow = false
                        window.location.reload()
                    })
                    .catch(error => {
                        console.log(error)
                    });
            }

            this.errors = [];

            if (!this.phoneNumber) {
                this.errors.push('Please enter a phone number.');
            }
            if (!this.type) {
                this.errors.push('Please choose a type.');
            }


            e.preventDefault();
        }
    },
    mounted() {
        function getContactTypes() {
            return axios.get('/api/getContactTypes');
        }

        function getPhone(customer, id) {
            return axios.get('/api/getPhone',{
                params: {
                    id: phoneId
                }
            });
        }

    },
    props: ['vendor', 'customer', 'phoneId']

};

Please sign in or create an account to participate in this conversation.