Блог

Я использую Laravel 7 и Vue.js 2.

Я хотел бы перехватить выделенный текст, когда пользователь изменит выбранный параметр.

Это мой компонент:

 <template>
    <div class="container">
        <div>
            <title-form v-model="titleForm" :titleMessage="titleForm"></title-form>
        </div>
        <hr>
        <div>
            <label for="devs" class="mt-3">Select a dev:</label>
        </div>
        <div>
            <select required v-model="user.devs" class="form-control" id="devs" @change="onChangeDev($event)">
                <option v-for="dev in devs" :value="dev.id" :key="dev.id">
                    {{ dev.name }}
                </option>
            </select>
        </div>
        <hr>
        <div>
            <label for="devs">Assign a task to {{ selectedDev }}:</label>
        </div>
        <div>
            <button type="button" class="btn btn-primary" @click="assignTask()">Assign Task</button>
        </div>
        <div>
            <label for="devs"  class="mt-3">Remove a task from {{ selectedDev }}:</label>
        </div>
        <div>
            <button type="button" class="btn btn-primary" @click="removeTask()">Remove Task</button>
        </div>
        <div>
            <label for="devs"  class="mt-3">Show in progress task assigned to {{ selectedDev }}:</label>
        </div>
        <div>
            <button type="button" class="btn btn-primary" @click="showTasksInProgress()">Show In Progress Tasks</button>
        </div>
        <div>
            <label for="devs" class="mt-3">Show all cross-team projects (no need to select a dev):</label>
        </div>
        <div>
            <button type="button" class="btn btn-primary">Show Cross-Team Projects</button>
        </div>
        <div>
            <label for="devs" class="mt-3">Show the PM of {{ selectedDev }}:</label>
        </div>
        <div>
            <button type="button" class="btn btn-primary">Show PM</button>
        </div>
    </div>
</template>

<script>
    import TitleForm from "./TitleForm.vue"

    export default {

        components: {
            'title-form': TitleForm

        },
        mounted() {
            console.log('Component mounted.');
        },
        props: {
            devs: {
                type: Array,
                required: true,
                default: () => [],
            }
        },
        computed: {
            titleForm: function () {
                return "Welcome to Ticketsapp";
            }
        },
        data: function() {
            return {
                selectedDev: "the selected dev",
                user: {
                    devs: "",
                }
            }
        },
        methods: {
            assignTask() {
                alert(this.user.devs);
                if(this.user.devs !== "") {
                    window.location.href = "allocate/"   this.user.devs;
                } else {
                    alert("Select a dev");
                }
                
            },
            showTasksInProgress() {
                alert(this.user.devs);
                if(this.user.devs !== "") {
                    window.location.href = "inprogress/"   this.user.devs;
                } else {
                    alert("Select a dev");
                }
                
            },
            removeTask() {
                alert(this.user.devs);
                if(this.user.devs !== "") {
                    window.location.href = "remove/"   this.user.devs;
                } else {
                    alert("Select a dev");
                }
            },
            onChangeDev(e) {
                alert(e.target.text); //problem
            }
        }
    }
</script>
 

Как вы можете себе представить, я хочу пройти dev.name . Я попытался создать метод, называемый onChangeDev передачей параметра $event , но, к сожалению, когда я предупреждаю текст, который я визуализирую undefined . Поэтому я спрашиваю себя, есть ли способ сделать это с помощью Vue. Может помочь?

значение события содержит значение параметра. ваш код предупредит идентификатор пользователя, для которого вы задаете значение параметра ( :value="user.id" ), если вы предупредите like ( alert(e.target.value) ) .

Значение содержит значение 🙂

Следующий код будет делать то, что вы ожидаете 😉

     onChangeDev(e) {
      const selectedDevId = e.target.value;
      const name = this.devs.filter((dev) => dev.id == selectedDevId)[0].name;
      alert(name);
    }
 

Но у него есть O (N) сложность по времени из-за использования метода фильтрации. Вероятно, вы можете ускорить привязку большего количества данных к опции, а затем извлечь их из DOMElement…