vuejs2

问题 In this simple example with hardcoded url my Vue.js components not rendering, plain html get rendered but all places i have a component appear blank. Phantom.js should work normally with Vue.js? var webPage = require('webpage'); var page = webPage.create(); page.viewportSize = { width: 1920, height: 1080 }; page.open("-----------", function start(status) { page.render('test.jpeg', {format: 'jpeg', quality: '100'}); phantom.exit(); }); Quick vue code for who want to help and do the test. <

问题 How can I send a file with vue.js? The following code is not working for me: <span title="Upload" class="badge badge-info"> <input type="file" id="file" name="file" @change="uploadData" class="archive" > <i id="iarchive" class="fa fa-upload"></i> </span> When I make console.log(this.request.file) I get FILE [object File] . Here is the .js: uploadData: function(e) { var files = e.target.files[0]; this.request.action = 'upload'; this.request.file = files; console.log("FILE "+this.request.file);

问题 I'm working with vue component (cli .vue) I need to have my stylesheet appear only if certain boolean is true/false. Simplest explanation would be something like : When myVar==false , component is not loading styles. <style v-if="myVar" lang="scss"> @import 'mystyles.css' </style> I know it is impossible in that way, but how I'm able to do 'similar' thing? I need to load my styles in vue if user want to use default Styles, if not I need to prevent them from being loaded. My component is used

问题 I'm working with vue component (cli .vue) I need to have my stylesheet appear only if certain boolean is true/false. Simplest explanation would be something like : When myVar==false , component is not loading styles. <style v-if="myVar" lang="scss"> @import 'mystyles.css' </style> I know it is impossible in that way, but how I'm able to do 'similar' thing? I need to load my styles in vue if user want to use default Styles, if not I need to prevent them from being loaded. My component is used

问题 Here is a VueJS component: <template> <a @click="log">click me<a> </template> <script> export default { data() { return { a: "a", b: "something", foo: { bar: "baz" }, // etc. } }, methods: { log() { // console.log( data ); // ??? } } } </script> I want to access the data from the log function and get it as an object (just like in its declaration). I know I can get data like this : log() { console.log( this.a ); console.log( this.b ); console.log( this.foo ); } But what I want is the whole

问题 I have a simple use case for a range input that changes a button's text whenever the range's value changes. I'm using Vue.js to bind data from an object that is simply storing the range value, and spitting it back out to the button (and the counter, for easier debugging). In the following fiddle, when the range value is greater than 0, the text reads "Buy", or else it reads "Sell". Fiddle: http://jsfiddle.net/svwa79pe/1/ What I want to do is show three button states depending on whether the

问题 I have a simple use case for a range input that changes a button's text whenever the range's value changes. I'm using Vue.js to bind data from an object that is simply storing the range value, and spitting it back out to the button (and the counter, for easier debugging). In the following fiddle, when the range value is greater than 0, the text reads "Buy", or else it reads "Sell". Fiddle: http://jsfiddle.net/svwa79pe/1/ What I want to do is show three button states depending on whether the

问题 I have the following code: <template> <div class="btn-group" data-toggle="buttons"> <label class="btn btn-outline-dark active"> <input type="radio" name="grp" v-model="channel" value="vh1" checked> VH1 </label> <label class="btn btn-outline-dark"> <input type="radio" name="grp" v-model="channel" value="mtv"> MTV </label> </div> </template> <script> export default { data() { return { channel: 'mtv' } }, watch: { channel: function(newValue) { console.log('value has been changed to ' + newValue)

问题 I'm trying to use the font-awesome in a simple Vue app created with vue-cli using the webpack-simple template, but this is being tricky. I installed font-awesome using npm install font-awesome --save and imported it in my entry js (main.js) import Vue from 'vue' import App from './App.vue' import VueRouter from 'vue-router'; import Home from "./components/Home.vue" Vue.use(VueRouter); import 'font-awesome/css/font-awesome.css'; const routes = [ { path: '/', component: Home } ]; const router =

问题 I'm trying to use the font-awesome in a simple Vue app created with vue-cli using the webpack-simple template, but this is being tricky. I installed font-awesome using npm install font-awesome --save and imported it in my entry js (main.js) import Vue from 'vue' import App from './App.vue' import VueRouter from 'vue-router'; import Home from "./components/Home.vue" Vue.use(VueRouter); import 'font-awesome/css/font-awesome.css'; const routes = [ { path: '/', component: Home } ]; const router =