Created
April 15, 2020 14:21
-
-
Save EarthenLynx/55b97b642d9a904dc0bb6b9d311e2b2f to your computer and use it in GitHub Desktop.
Filter snippet for vue.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
export const countMixin = { | |
filters: { | |
reverseText(value) { | |
return value | |
.split("") | |
.reverse() | |
.join(""); | |
} | |
}, | |
computed: { | |
textReverseComputed() { | |
return this.textCom | |
.split("") | |
.reverse() | |
.join(""); | |
}, | |
textCountComputed() { | |
return this.textCount.concat(this.textCount.length); | |
} | |
} | |
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<template> | |
<div class="container" id="app"> | |
<div class="row"> | |
<div class="col"> | |
<h1>Filters & Mixins</h1> | |
<!-- Local filter which reverses the text that is applied --> | |
<input type="text" class="form-control" v-model="text"/> | |
<p>{{text|reverseText}}</p> | |
<!-- Build a global filter that counts the length of a word + appends it --> | |
<input type="text" class="form-control" v-model="textCount"/> | |
<p>{{textCount|countText}}</p> | |
<!-- Do the same as in one, but with computed props --> | |
<input type="text" class="form-control" v-model="textCom"/> | |
<p>{{textReverseComputed}}</p> | |
<!-- Do the same as in two, but with computed props --> | |
<input type="text" class="form-control" v-model="textCount"/> | |
<p>{{textCountComputed}}</p> | |
<!-- Now outsource the compo --> | |
</div> | |
</div> | |
</div> | |
</template> | |
<script> | |
// Mixins are code snippets that are used across several vue instances!! | |
import {countMixin} from "./countMixin"; | |
export default { | |
name: "App", | |
data() { | |
return { | |
text: "", | |
textCount: "", | |
textCom: "Test", | |
}; | |
}, | |
mixins: [countMixin] | |
// Mixins are code snippets that are used across several vue instances!! | |
}; | |
</script> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment