使用 laravel 惯性和 metronic8 的 tagify 在编辑字段中显示数据

Question

我试图在编辑表单中显示“work_places”字段的数据，该字段是Tagify，我将值存储在json字段中。

这就是进行 json_encode 后数据存储在数据库单元中的方式： [“测试1”，“测试2”，“测试3”]

这就是我尝试在编辑表单中显示值的方式：

                    <div class="col-lg-8">
                        <label class="fs-6 form-label fw-bolder text-dark">Work Places</label>
                        <input class="form-control" id="work_places"/>
                        <div v-if="form.errors.work_places" v-text="form.errors.work_places" class="text-danger text-xs mt-1"></div>
                    </div>

<script setup>
import { useForm } from "@inertiajs/inertia-vue3";
import {onMounted, useAttrs} from "vue";

const attrs = useAttrs();

let props = defineProps({
    jobs_list: Object,
});


let form = useForm({
    name: props.jobs_list.name,
    work_places: JSON.parse(props.jobs_list.work_places),
    is_active: props.jobs_list.is_active,
});


let submit = () => {
    form.put('/constants/jobs-list/' + props.jobs_list.id);
}
onMounted(() => {
    var workPlacesInput = document.querySelector("#work_places");
    new Tagify(workPlacesInput, {
        whitelist: form.work_places.map(wp => ({ value: wp })),
    });
    workPlacesInput.addEventListener('change', (e) => {
        form.work_places = JSON.parse(e.target.value).map(tag => tag.value);
    });

});
</script>

但这对我不起作用。 我还尝试了不同的方法来解析映射值，例如：

work_places: JSON.parse(props.jobs_list.work_places).map(place => ({ value: place })),

whitelist: form.work_places.map(wp => wp.value),

但仍然不起作用。

Answer 1

我是这样解决的：

1- 设置 value 属性并将其绑定到变量：

:value="initialValue"

<div class="col-lg-8">
                        <label class="fs-6 form-label fw-bolder text-dark">أماكن العمل</label>
                        <input class="form-control" :value="initialValue" id="work_places"/>
                        <div v-if="form.errors.work_places" v-text="form.errors.work_places" class="text-danger text-xs mt-1"></div>
                    </div>

let form = useForm({
    name: props.jobs_list.name,
    work_places: [],
    is_active: props.jobs_list.is_active,
});


// set the vale of the tagify input
let initialValue = ref(props.jobs_list.work_places ? JSON.parse(props.jobs_list.work_places) : '');

onMounted(() => {
    var workPlacesInput = document.querySelector("#work_places");
    new Tagify(workPlacesInput);

    // to handle the value before save it
    workPlacesInput.addEventListener('change', (e) => {
        form.work_places = JSON.parse(e.target.value).map(tag => tag.value);
    });
});

别忘了

import {onMounted, ref} from "vue";