Skip to content

Instantly share code, notes, and snippets.

@wolfhesse

wolfhesse/connect_backup.vue.html

Created November 14, 2017 00:21
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save wolfhesse/c6a8b3750f03f6d8a97371a49b068e75 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save wolfhesse/c6a8b3750f03f6d8a97371a49b068e75 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. wolfhesse created this gist Nov 14, 2017.
    71 changes: 71 additions & 0 deletions connect_backup.vue.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,71 @@
    <template id="template-connect">
    <div class="connect">
    <div class="connect__searchPanel">
    <div class="connect_speciesSelect">
    <button @click="handleDogs">Dogs</button>
    <button @click="handleCats">Cats</button>
    </div>

    <div class="connect_Search">
    <input type="text"
    :placeholder="searchPlaceholder">

    {{ species }}
    </div>
    </div>
    </div>
    </template>

    <script>
    (function() {
    "use strict"

    Vue.component("vue-connect", {
    template: "#template-connect",

    data: function() {
    return {
    species: "dogs"
    }
    },

    computed: {
    searchPlaceholder: function() {
    var self = this
    return self.species + " is computed.."
    }
    },

    methods: {
    handleDogs: function() {
    //alert('dogs...')
    var self = this
    self.species = 'dog'
    },
    handleCats: function() {
    //alert('cats...')
    var self = this
    self.species = 'cat'

    }
    },

    })

    })()

    </script>

    <style>
    .connect__searchPanel {
    margin-bottom: 2em;
    padding: 0.75em 0.5em;
    border: 3px solid #1a1a1a;
    border-radius: 6px;
    }

    .connect_speciesSelect {
    margin-bottom: 0.5em;
    }

    </style>