| 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667 |
- <!doctype html>
- <head>
- <meta charset="utf-8" />
- </head>
- <link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.red-blue.min.css" />
- <script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>
- <style>
- .entry {
- width: 100%;
- background-color: aquamarine;
- padding: 2em;
- }
- .title {
- display: inline-block;
- width: 6em;
- }
- </style>
- <div id="app">
- <button onclick="adapter.setter()">save</button>
- <button onclick="adapter.getter()">load</button>
- <template v-for="(value, key) in config">
- <br>
- <div class="title">{{key}}</div><input v-model="config[key]">
- </template>
- <pre>
- {{config}}
- </pre>
- </div>
- <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
- <script src="adapter.js"></script>
- <script>
- var app = new Vue({
- el: '#app',
- data: {
- config: {
- age: 42,
- attributes: ["Fluff", "yo"],
- },
- },
- mounted: function () {
- adapter.onget = function () {
- app.config = adapter.responseJson
- }
- adapter.onset = function () {
- return app.config;
- }
- // adapter.getter();
- },
- watch: {},
- computed: {
- test: function () {},
- }
- })
- </script>
- <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
|
