سلام
یه تابع نوشتم که با اون یک آبجکت را عوض می کنم وقتی از آبجکت لاگ می گیرم درست نمایش می دهد ولی توی صفحه سایت اشتباه است
اینم کدش
<template>
<Head title=" خانه" />
<div class="px-4">
<Name />
<form class="mt-3">
<div class="input-group mb-3 mx-auto">
<span class="input-group-text" id="basic-addon1">
<i class="bi bi-search"></i>
</span>
<input
type="text"
class="bg-light"
placeholder="جست و جو"
v-model="query"
/>
</div>
</form>
<Add />
</div>
<table class="m-0 mt-3 table table-Secondary table-striped table-hover">
<thead>
<tr class="table-dark">
<th scope="col">نام وسیله</th>
<th scope="col">مکان وسیله</th>
<th scope="col"></th>
</tr>
</thead>
<tbody>
<tr v-for="device in devics" :key="device.id">
<th scope="row">{{ device.name }}</th>
<th>{{ device.body }}</th>
<th>
<div class="d-lg-flex align-items-center p-0 m-0">
<Link
:href="route('Device.edit', { id: device.id })"
class="btn btn-dark m-2 ms-auto"
>ویرایش مکان</Link
>
<Link
:href="route('Device.delete', { id: device.id })"
class="btn btn-danger m-2"
>حذف</Link
>
</div>
</th>
</tr>
</tbody>
</table>
</template>
<script>
import Add from "@/Components/Add.vue";
import Name from "@/Components/Name.vue";
import { Head, Link } from "@inertiajs/inertia-vue3";
import { reactive, ref, watch } from "@vue/runtime-core";
export default {
components: {
Add,
Head,
Link,
Name,
},
props: { devices: Object },
setup(props) {
let query = ref("");
var devics = reactive(props.devices);
watch(query, () => {
devics = props.devices.filter((item) => {
return (
item.name.toLowerCase().indexOf(query.value.toLowerCase()) !== -1
);
});
console.log(query.value);
console.log(devics);
});
return {
query,
devics,
};
},
};
</script>
به موسوی کمک کنید تا مشکل خودش را حل کند؛ اینطور میتوانیم با هم پیشرفت کنیم.
آیا مایل به ارسال نوتیفیکیشن و اخبار از طرف راکت هستید ؟