Postingan lainnya
Dasar Vue tetang Filter
assalamualaikum gan minta bantuanya , tetang vue tidak mau di filter
6 Jawaban:
ane jg bingung gan ane ikutin tutorial udah sama persis tapi ada error sory g bisa jawab prtnyaan agan, malah ane yg nanya nih gan klo gini tapi error knpa ya?
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div id="box">
{{{ raw }}}
</div>
<script src="vue.js"></script>
<script>
new Vue({
el: "#box",
data: {
raw: "<p>ini parafgraf</p>"
}
});
</script>
</body>
</html>
Jawaban Terpilih
FilterBy ada di vue 1, kalau menggunakan filter di vue v2 beda lagi gan Keterangan cara mengganti [link]https://vuejs.org/v2/guide/migration.html#Two-Way-Filters-replaced [/link] Cara filter di vue 2.0 https://vuejs.org/v2/guide/filters.html
@irmanfreestyle bisa jadi error karena src file vue.js nya tidak ditemukan, coba src untul vue.js nya dirubah seperti dibawah, dan kurangi satu kurung kurawal -> {{ raw }} semoga berhasil ...
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div id="box">
<p>
{{ raw }}
</p>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.js"></script>
<script>
new Vue({
el: "#box",
data: {
raw: "ini parafgraf"
},
});
</script>
</body>
</html>
@hakimlukman bukan gan maksud ane pengen bikin tag
bukan langsung teks seperti itu.
kayanya tutorial bang hilman pake vue versi lama ya? jadi ga bisa, ane pake vue versi 2 soalnya
oh, saya kira valuenya ngga tampil, hehe di versi 2 pakai v-html bang ...
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div id="box">
<span v-html="raw">
{{ raw }}
</span>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.js"></script>
<script>
new Vue({
el: "#box",
data: {
raw: "<b>ini parafgraf</b>"
},
});
</script>
</body>
</html>
@Bayu63 untuk di vue2 bisa jadi seperti ini ... karena perubahan filterBy
<html>
<head>
<title></title>
</head>
<body>
<div id="app">
<ul>
<h2>Filter</h2>
<!-- Masukan huruf yang hendak dicari -->
<input type="text" v-model="search">
<!-- Menampilkan hasil pencarian -->
<li v-for="member in filteredMembers">
{{ member.nama }}
</li>
</ul>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.js"></script>
<script>
new Vue({
el : '#app',
data : {
search : '',
members : [
{nama : 'uya', umur : 10},
{nama : 'desti', umur : 11},
{nama : 'ulfy', umur : 12},
],
},
computed: {
filteredMembers() {
return this.members.filter(member => {
return member.nama.indexOf(this.search.toLowerCase()) > -1
})
}
}
});
</script>
</body>
</html>