diff --git a/src/v2/api/index.md b/src/v2/api/index.md index ad585ce963..4f8b8ed6eb 100644 --- a/src/v2/api/index.md +++ b/src/v2/api/index.md @@ -3,31 +3,31 @@ title: API type: api --- -## Global Config +## Global konfiguration -`Vue.config` is an object containing Vue's global configurations. You can modify its properties listed below before bootstrapping your application: +`Vue.config` är ett objekt som innehåller Vue's globala konfigurationer. Du kan modifiera dess egenskaper (properties) (TRANSLATE!) som är listade nedan före du startar din applikation. ### silent -- **Type:** `boolean` +- **Typ:** `boolean` -- **Default:** `false` +- **Standardvärde:** `false` -- **Usage:** +- **Användning:** ``` js Vue.config.silent = true ``` - Suppress all Vue logs and warnings. + Tysta alla logg- och varningsmeddelanden från Vue. ### optionMergeStrategies -- **Type:** `{ [key: string]: Function }` +- **Typ:** `{ [key: string]: Function }` -- **Default:** `{}` +- **Standardvärde:** `{}` -- **Usage:** +- **Användning:** ``` js Vue.config.optionMergeStrategies._my_option = function (parent, child, vm) { @@ -41,106 +41,108 @@ type: api // Profile.options._my_option = 2 ``` - Define custom merging strategies for options. + Definiera anpassade sammanfogningsstrategier (TRANSLATE?) för alternativ (options) (TRANSLATE!). - The merge strategy receives the value of that option defined on the parent and child instances as the first and second arguments, respectively. The context Vue instance is passed as the third argument. + Sammanfogningsstrategien erhåller värdet av alternativet som är definierat på föräldra och barninstansen som det första och andra argumentet. Kontextinstansen av Vue skickas som det tredje argumentet. -- **See also:** [Custom Option Merging Strategies](../guide/mixins.html#Custom-Option-Merge-Strategies) +- **Läs även:** [Anpassade sammanfogningsstrategier för alternativ](../guide/mixins.html#Custom-Option-Merge-Strategies) ### devtools -- **Type:** `boolean` +- **Typ:** `boolean` -- **Default:** `true` (`false` in production builds) +- **Standardvärde:** `true` (`false` i produktionsläge (TRANSLATE?)) -- **Usage:** +- **Användning:** ``` js - // make sure to set this synchronously immediately after loading Vue + // var noga med att sätta detta värdet synkront direkt efter att du startat Vue Vue.config.devtools = true ``` - Configure whether to allow [vue-devtools](https://github.com/vuejs/vue-devtools) inspection. This option's default value is `true` in development builds and `false` in production builds. You can set it to `true` to enable inspection for production builds. + Konfigurera huruvida inspektion av [vue-devtools](https://github.com/vuejs/vue-devtools) tillåts. + + Standardvärdet av detta alternativet är `true` i utvecklingsläge (TRANSLATE?) och `false` i produktionsläge (TRANSLATE?). Du kan sätta det till `true` för att tillåta inspektion i produktionsläge (TRANSLATE?). ### errorHandler -- **Type:** `Function` +- **Typ:** `Function` -- **Default:** `undefined` +- **Standardvärde:** `undefined` -- **Usage:** +- **Användning:** ``` js Vue.config.errorHandler = function (err, vm, info) { - // handle error - // `info` is a Vue-specific error info, e.g. which lifecycle hook - // the error was found in. Only available in 2.2.0+ + // felhantering + // `info` är ett Vue-specifikt felmeddelande, t.ex. vilken lifecycle hook + // felet uppstod i. Endast tillgänglig i 2.2.0+ } ``` - Assign a handler for uncaught errors during component render function and watchers. The handler gets called with the error and the Vue instance. + Tilldela en hanterare för ofångade fel som uppstått under komponentrendering och watchers (bevakare) (TRANSLATE!). Hanteraren anropas med felet och Vue-instansen. - > In 2.2.0+, this hook also captures errors in component lifecycle hooks. Also, when this hook is `undefined`, captured errors will be logged with `console.error` instead of crashing the app. + > I 2.2.0+ kommer denna hook (krok) (TRANSLATE!) även fånga fel i lifecycle hooks (livscykelkrokar) (TRANSLATE!) i komponenter. När denna hook (TRANSLATE!) är `undefined` kommer fångade fel bli loggade med `console.error` istället för att krascha applikationen. - > In 2.4.0+, this hook also captures errors thrown inside Vue custom event handlers. + > I 2.4.0+ kommer denna hook (TRANSLATE!) även fånga fel som uppstår i anpassade Vue händelsehanterare. - > In 2.6.0+, this hook also captures errors thrown inside `v-on` DOM listeners. In addition, if any of the covered hooks or handlers returns a Promise chain (e.g. async functions), the error from that Promise chain will also be handled. + > I 2.6.0+ kommer denna hook (TRANSLATE!) även fånga fel som uppstår i `v-on` DOM lyssnare. Om någon av de gällande hookarna (TRANSLATE!) eller hanterarna returnerar en Promise-kedja, kommer felet från kedjan även bli hanterat. - > Error tracking services [Sentry](https://sentry.io/for/vue/) and [Bugsnag](https://docs.bugsnag.com/platforms/browsers/vue/) provide official integrations using this option. + > Felsökningstjänsterna [Sentry](https://sentry.io/for/vue/) och [Bugsnag](https://docs.bugsnag.com/platforms/browsers/vue/) förser officiella integrationer som utnyttjar detta alternativet. ### warnHandler -> New in 2.4.0+ +> Nytt i 2.4.0+ -- **Type:** `Function` +- **Typ:** `Function` -- **Default:** `undefined` +- **Standardvärde:** `undefined` -- **Usage:** +- **Användning:** ``` js Vue.config.warnHandler = function (msg, vm, trace) { - // `trace` is the component hierarchy trace + // `trace` är spårningen i komponenthierarkin } ``` - Assign a custom handler for runtime Vue warnings. Note this only works during development and is ignored in production. + Tilldela en anpassad hanterare för varningar under Vue körningen. Notera att detta endast fungerar i utvecklingsläge (TRANSLATE?) och ignoreras i produktionsläge (TRANSLATE?). ### ignoredElements -- **Type:** `Array` +- **Typ:** `Array` -- **Default:** `[]` +- **Standardvärde:** `[]` -- **Usage:** +- **Användning:** ``` js Vue.config.ignoredElements = [ 'my-custom-web-component', 'another-web-component', - // Use a `RegExp` to ignore all elements that start with "ion-" - // 2.5+ only + // Använd ett reguljärt uttryck (RegExp) för att ignorera alla element som börjar på "ion-" + // Bara i 2.5+ /^ion-/ ] ``` - Make Vue ignore custom elements defined outside of Vue (e.g., using the Web Components APIs). Otherwise, it will throw a warning about an `Unknown custom element`, assuming that you forgot to register a global component or misspelled a component name. + Tvinga Vue att ignorera anpassade element som är definierade utanför Vue (t.ex. då man använder Web Components API:et). Varningar om `Unknown custom element` kommer annars att kastas, förutsatt att du glömt att registrera en global komponent eller felstavat ett komponentnamn. ### keyCodes -- **Type:** `{ [key: string]: number | Array }` +- **Typ:** `{ [key: string]: number | Array }` -- **Default:** `{}` +- **Standardvärde:** `{}` -- **Usage:** +- **Användning:** ``` js Vue.config.keyCodes = { v: 86, f1: 112, - // camelCase won`t work + // camelCase fungerar ej mediaPlayPause: 179, - // instead you can use kebab-case with double quotation marks + // du kan istället använda kebab-case med dubbla citattecken "media-play-pause": 179, up: [38, 87] } @@ -150,51 +152,51 @@ type: api ``` - Define custom key alias(es) for `v-on`. + Definiera anpassade tangentalias för `v-on`. ### performance -> New in 2.2.0+ +> Nytt i 2.2.0+ -- **Type:** `boolean` +- **Typ:** `boolean` -- **Default:** `false (from 2.2.3+)` +- **Standardvärde:** `false (fr.o.m. 2.2.3+)` -- **Usage**: +- **Användning**: - Set this to `true` to enable component init, compile, render and patch performance tracing in the browser devtool performance/timeline panel. Only works in development mode and in browsers that support the [performance.mark](https://developer.mozilla.org/en-US/docs/Web/API/Performance/mark) API. + Sätt detta till `true` för att möjliggöra komponentinitiering, kompilering, rendering och spårningslappning (TRANSLATE?) för prestanda i prestanda/tidslinje-panelen i webbläsarens utvecklingsverktyg. Fungerar endast i utvecklingsläge (TRANSLATE!) och i webbläsare som stöder [performance.mark](https://developer.mozilla.org/en-US/docs/Web/API/Performance/mark) API:et. ### productionTip -> New in 2.2.0+ +> Nytt i 2.2.0+ -- **Type:** `boolean` +- **Typ:** `boolean` -- **Default:** `true` +- **Standardvärde:** `true` -- **Usage**: +- **Användning**: - Set this to `false` to prevent the production tip on Vue startup. + Sätt detta till `false` för att förhindra produktionstipset vid uppstart av Vue. -## Global API +## Globalt API ### Vue.extend( options ) -- **Arguments:** +- **Argument:** - `{Object} options` -- **Usage:** +- **Användning:** - Create a "subclass" of the base Vue constructor. The argument should be an object containing component options. + Skapa en "subklass" från Vues baskonstruktor. Argumentet bör vara ett objekt som inehåller komponentalternativ. - The special case to note here is the `data` option - it must be a function when used with `Vue.extend()`. + Ett specialfall att notera här är `data` alternativet - det måste vara en funktion då det används med `Vue.extend()`. ``` html
``` ``` js - // create constructor + // skapa konstruktor var Profile = Vue.extend({ template: '

{{firstName}} {{lastName}} aka {{alias}}

', data: function () { @@ -205,92 +207,92 @@ type: api } } }) - // create an instance of Profile and mount it on an element + // skapa en Profile-instans och montera den på ett element new Profile().$mount('#mount-point') ``` - Will result in: + Resulterar i detta: ``` html

Walter White aka Heisenberg

``` -- **See also:** [Components](../guide/components.html) +- **Läs även:** [Komponenter](../guide/components.html) ### Vue.nextTick( [callback, context] ) -- **Arguments:** +- **Argument:** - `{Function} [callback]` - `{Object} [context]` -- **Usage:** +- **Användning:** - Defer the callback to be executed after the next DOM update cycle. Use it immediately after you've changed some data to wait for the DOM update. + Uppskjut exekvering av callbackfunktionen (TRANSLATE!) fram tills nästa uppdateringscykel av DOM. Använd detta genast efter att du uppdaterat data för att vänta på DOM-uppdateringen. ``` js - // modify data + // modifiera data vm.msg = 'Hello' - // DOM not updated yet + // DOM är inte uppdaterad än Vue.nextTick(function () { - // DOM updated + // DOM är nu uppdaterad }) - // usage as a promise (2.1.0+, see note below) + // användning som en promise (2.1.0+, se notis nedan) Vue.nextTick() .then(function () { - // DOM updated + // DOM är nu uppdaterad }) ``` - > New in 2.1.0+: returns a Promise if no callback is provided and Promise is supported in the execution environment. Please note that Vue does not come with a Promise polyfill, so if you target browsers that don't support Promises natively (looking at you, IE), you will have to provide a polyfill yourself. + > Nytt i 2.1.0+: returnerar en Promise ifall ingen callbackfunktion (TRANSLATE!) är given och Promise stöds i exekveringsmiljön. Vänligen notera att det inte följer en Promise polyfill (TRANSLATE!) med Vue, så ifall du utvecklar mot webbläsare som inte stöder Promise (ser på dig, IE) måste du förse en polyfill (TRANSLATE!) själv. -- **See also:** [Async Update Queue](../guide/reactivity.html#Async-Update-Queue) +- **Läs även:** [Asynkron uppdateringskö](../guide/reactivity.html#Async-Update-Queue) ### Vue.set( target, propertyName/index, value ) -- **Arguments:** +- **Argument:** - `{Object | Array} target` - `{string | number} propertyName/index` - `{any} value` -- **Returns:** the set value. +- **Returnerar:** det satta värdet. -- **Usage:** +- **Avändning:** - Adds a property to a reactive object, ensuring the new property is also reactive, so triggers view updates. This must be used to add new properties to reactive objects, as Vue cannot detect normal property additions (e.g. `this.myObject.newProperty = 'hi'`). + Lägger till en egenskap på ett reaktivt objekt och säkerställer att den nya egenskapen också är reaktiv, vilket utlöser uppdatering av view (TRANSLATE!). Detta måste användas för att lägga till nya egenskaper på reaktiva objekt eftersom Vue inte kan detektera normala egenskapstillägg (t.ex. `this.myObject.newProperty = 'hi'`). -

The target object cannot be a Vue instance, or the root data object of a Vue instance.

+

Målobjektet kan inte vara en Vue-instans eller det översta dataobjektet i en Vue-instans.

-- **See also:** [Reactivity in Depth](../guide/reactivity.html) +- **Läs även:** [Fördjupning i reaktivitet](../guide/reactivity.html) ### Vue.delete( target, propertyName/index ) -- **Arguments:** +- **Argument:** - `{Object | Array} target` - `{string | number} propertyName/index` - > Only in 2.2.0+: Also works with Array + index. + > Endast i 2.2.0+: Fungerar även med Array + index (TRANSLATE!). -- **Usage:** +- **Användning:** - Delete a property on an object. If the object is reactive, ensure the deletion triggers view updates. This is primarily used to get around the limitation that Vue cannot detect property deletions, but you should rarely need to use it. + Radera en egenskap på ett objekt. Säkerställer att raderingen utlöser uppdatering av view (TRANSLATE!) om objektet är reaktivt. Detta används primärt för att kringgå begränsningen Vue har med att detektera egenskapsraderingar, men detta lär sällan behövas. -

The target object cannot be a Vue instance, or the root data object of a Vue instance.

+

Målobjektet kan inte vara en Vue-instans eller det översta dataobjektet i en Vue-instans.

-- **See also:** [Reactivity in Depth](../guide/reactivity.html) +- **Läs även:** [Fördjupning i reaktivitet](../guide/reactivity.html) ### Vue.directive( id, [definition] ) -- **Arguments:** +- **Argument:** - `{string} id` - `{Function | Object} [definition]` -- **Usage:** +- **Användning:** - Register or retrieve a global directive. + Registrera eller motta ett globalt direktiv. ``` js - // register + // registrera Vue.directive('my-directive', { bind: function () {}, inserted: function () {}, @@ -299,96 +301,96 @@ type: api unbind: function () {} }) - // register (function directive) + // registrera (funktionsdirektiv) Vue.directive('my-directive', function () { - // this will be called as `bind` and `update` + // detta anropas som `bind` och `update` }) - // getter, return the directive definition if registered + // getter, returnera direktivdefinitionen om den är registrerad var myDirective = Vue.directive('my-directive') ``` -- **See also:** [Custom Directives](../guide/custom-directive.html) +- **Läs även:** [Anpassade direktiv](../guide/custom-directive.html) ### Vue.filter( id, [definition] ) -- **Arguments:** +- **Argument:** - `{string} id` - `{Function} [definition]` -- **Usage:** +- **Användning:** - Register or retrieve a global filter. + Registrera eller motta ett globalt filter. ``` js - // register + // registrera Vue.filter('my-filter', function (value) { - // return processed value + // returnera bearbetat värde }) - // getter, return the filter if registered + // getter, returnera filtret om det är registrerat var myFilter = Vue.filter('my-filter') ``` -- **See also:** [Filters](../guide/filters.html) +- **Läs även:** [Filter](../guide/filters.html) ### Vue.component( id, [definition] ) -- **Arguments:** +- **Argument:** - `{string} id` - `{Function | Object} [definition]` -- **Usage:** +- **Användning:** - Register or retrieve a global component. Registration also automatically sets the component's `name` with the given `id`. + Registrera eller motta en global komponent. Registrering sätter även automatiskt komponentens `name` med det givna `id`. ``` js - // register an extended constructor + // registrera en utvidgad konstruktor Vue.component('my-component', Vue.extend({ /* ... */ })) - // register an options object (automatically call Vue.extend) + // registrera ett alternativobjekt (anropa automatiskt Vue.extend) Vue.component('my-component', { /* ... */ }) - // retrieve a registered component (always return constructor) + // motta en registrerad komponent (returnera alltid konstruktor) var MyComponent = Vue.component('my-component') ``` -- **See also:** [Components](../guide/components.html) +- **Läs även:** [Komponenter](../guide/components.html) ### Vue.use( plugin ) -- **Arguments:** +- **Argument:** - `{Object | Function} plugin` -- **Usage:** +- **Användning:** - Install a Vue.js plugin. If the plugin is an Object, it must expose an `install` method. If it is a function itself, it will be treated as the install method. The install method will be called with Vue as the argument. + Installera en Vue.js plugin (insticksprogram) (TRANSLATE?). Om plugin är ett objekt måste den exponera en `install` metod. Om den i själva verket är en funktion kommer den bli behandlad som install-metoden. Install-metoden anropas med Vue som argument. - This method has to be called before calling `new Vue()` + Denna metod måste anropas före man använder `new Vue()`. - When this method is called on the same plugin multiple times, the plugin will be installed only once. + När denna metod anropas på samma plugin (TRANSLATE!) flera gånger installeras den bara en gång. -- **See also:** [Plugins](../guide/plugins.html) +- **Läs även:** [Plugins](../guide/plugins.html) ### Vue.mixin( mixin ) -- **Arguments:** +- **Argument:** - `{Object} mixin` -- **Usage:** +- **Användning:** - Apply a mixin globally, which affects every Vue instance created afterwards. This can be used by plugin authors to inject custom behavior into components. **Not recommended in application code**. + Tillämpa en global mixin vilket påverkar varje Vue-instans som skapas hädanefter. Detta kan utnyttjas av pluginutvecklare (TRANSLATE!) för att injicera anpassad funktionalitet i komponenter. **Rekommenderas ej i applikationskod**. -- **See also:** [Global Mixin](../guide/mixins.html#Global-Mixin) +- **Läs även:** [Global mixin](../guide/mixins.html#Global-Mixin) ### Vue.compile( template ) -- **Arguments:** +- **Argument:** - `{string} template` -- **Usage:** +- **Användning:** - Compiles a template string into a render function. **Only available in the full build.** + Kompilerar en templatesträng (mallsträng) (TRANSLATE?) till en renderingsfunktion. **Endast tillgänglig i fullständig utgåva**. ``` js var res = Vue.compile('
{{ msg }}
') @@ -402,20 +404,20 @@ type: api }) ``` -- **See also:** [Render Functions](../guide/render-function.html) +- **Läs även:** [Renderingsfunktioner](../guide/render-function.html) ### Vue.observable( object ) -> New in 2.6.0+ +> Nytt i 2.6.0+ -- **Arguments:** +- **Argument:** - `{Object} object` -- **Usage:** +- **Användning:** - Make an object reactive. Internally, Vue uses this on the object returned by the `data` function. + Gör ett objekt reaktivt. Internt använder Vue detta på objektet som returneras av `data`-funktionen. - The returned object can be used directly inside [render functions](../guide/render-function.html) and [computed properties](../guide/computed.html), and will trigger appropriate updates when mutated. It can also be used as a minimal, cross-component state store for simple scenarios: + Det returnerade objektet kan genast användas i [renderingsfunktioner](../guide/render-function.html) och [computed properties (beräknade variabler)](../guide/computed.html) (TRANSLATE?) och kommer utlösa ändamålsenliga uppdateringar vid förändring. Den kan även användas som en minimal lagringsplats på tvärs av komponenter för simpla scenarier: ``` js const state = Vue.observable({ count: 0 }) @@ -429,15 +431,15 @@ type: api } ``` -

In Vue 2.x, `Vue.observable` directly mutates the object passed to it, so that it is equivalent to the object returned, as [demonstrated here](../guide/instance.html#Data-and-Methods). In Vue 3.x, a reactive proxy will be returned instead, leaving the original object non-reactive if mutated directly. Therefore, for future compatibility, we recommend always working with the object returned by `Vue.observable`, rather than the object originally passed to it.

+

I Vue 2.x kommer objektet som skickas till `Vue.observable` bli direkt förändrat så att det är identiskt med det returnerade objektet, vilket [demonstreras här](../guide/instance.html#Data-and-Methods). I Vue 3.x returneras en reaktiv proxy istället, vilket lämnar originalobjektet icke-reaktivt om det förändras direkt. Vi rekommenderar därför att alltid jobba mot det returnerade objektet från `Vue.observable` för framtida kompatibilitet, i motsats till objektet som ursprungligen skickas till den.

-- **See also:** [Reactivity in Depth](../guide/reactivity.html) +- **Läs även:** [Fördjupning i reaktivitet](../guide/reactivity.html) ### Vue.version -- **Details**: Provides the installed version of Vue as a string. This is especially useful for community plugins and components, where you might use different strategies for different versions. +- **Detaljer**: Innehåller versionsnummret till Vue-installationen i textform. Detta är speciellt användbart för communityplugins (TRANSLATE!) och komponenter där du kanske använder olika strategier för olika versionsnummer. -- **Usage**: +- **Användning**: ```js var version = Number(Vue.version.split('.')[0]) @@ -447,45 +449,45 @@ type: api } else if (version === 1) { // Vue v1.x.x } else { - // Unsupported versions of Vue + // Saknas stöd för detta versionsnummret av Vue } ``` -## Options / Data +## Alternativ / Data ### data -- **Type:** `Object | Function` +- **Typ:** `Object | Function` -- **Restriction:** Only accepts `Function` when used in a component definition. +- **Restriktion:** accepterar endast `Function` när den används i en komponentdefinition. -- **Details:** +- **Detaljer:** - The data object for the Vue instance. Vue will recursively convert its properties into getter/setters to make it "reactive". **The object must be plain**: native objects such as browser API objects and prototype properties are ignored. A rule of thumb is that data should just be data - it is not recommended to observe objects with their own stateful behavior. + Dataobjektet för Vue-instansen. Vue kommer rekursivt konvertera sina egenskaper till getters/setters (TRANSLATE!) för att göra dem "reaktiva". **Detta måste vara ett enkelt objekt**: innebyggda objekt så som objekt från webbläsar-API:er blir ignorerade. Värt att minnas är att data borde endast vara data - det rekommenderas ej att observera objekt med egna tillståndsbeteenden. - Once observed, you can no longer add reactive properties to the root data object. It is therefore recommended to declare all root-level reactive properties upfront, before creating the instance. + Du kan inte längre lägga till reaktiva objekt på dataobjektets toppnivå när det väl är observerat. Det rekommenderas därför att genast deklarera alla reaktiva egenskaper på toppnivå innan instansen skapas. - After the instance is created, the original data object can be accessed as `vm.$data`. The Vue instance also proxies all the properties found on the data object, so `vm.a` will be equivalent to `vm.$data.a`. + När instansen väl har skapats kan det ursprungliga dataobjektet nås genom `vm.$data`. Vue-instansen vidarebefordrar också alla egenskaper i dataobjektet, så `vm.a` motsvarar `vm.$data.a`. - Properties that start with `_` or `$` will **not** be proxied on the Vue instance because they may conflict with Vue's internal properties and API methods. You will have to access them as `vm.$data._property`. + Egenskaper som startar på `_` eller `$` kommer **inte** vidarebefordras på Vue-instansen eftersom de kan strida mot de interna egenskaperna och API-metoderna i Vue. Du måste då nå dem genom `vm.$data._property`. - When defining a **component**, `data` must be declared as a function that returns the initial data object, because there will be many instances created using the same definition. If we use a plain object for `data`, that same object will be **shared by reference** across all instances created! By providing a `data` function, every time a new instance is created we can call it to return a fresh copy of the initial data. + När en **komponent** definieras måste `data` deklareras som en funktion som returnerar det ursprungliga dataobjektet, eftersom det kommer vara flera instanser som använder samma definition. Om vi använder ett enkelt objekt för `data` kommer det samma objektet att **delas genom referens** på tvärs av alla instanser som skapas! Genom att göra `data` till en funktion kan vi anropa denna funktion varje gång en ny instans skapas och på så vis få en helt ny kopia av ursprungsdata. - If required, a deep clone of the original object can be obtained by passing `vm.$data` through `JSON.parse(JSON.stringify(...))`. + Om det behövs kan man få en djup-klon av ursprungsobjektet genom att sända `vm.$data` genom `JSON.parse(JSON.stringify(...))`. -- **Example:** +- **Exempel:** ``` js var data = { a: 1 } - // direct instance creation + // skapa en instans direkt var vm = new Vue({ data: data }) vm.a // => 1 vm.$data === data // => true - // must use function when in Vue.extend() + // måste använda en funktion i Vue.extend() var Component = Vue.extend({ data: function () { return { a: 1 } @@ -493,45 +495,45 @@ type: api }) ``` - Note that if you use an arrow function with the `data` property, `this` won't be the component's instance, but you can still access the instance as the function's first argument: + Notera att om du använder en pilfunktion i `data`-egenskapen kommer `this` inte vara komponentinstansen, men du kan fortfarande nå instansen genom funktionens första argument: ```js data: vm => ({ a: vm.myProp }) ``` -- **See also:** [Reactivity in Depth](../guide/reactivity.html) +- **Läs även:** [Fördjupning i reaktivitet](../guide/reactivity.html) ### props -- **Type:** `Array | Object` +- **Typ:** `Array | Object` -- **Details:** +- **Detaljer:** - A list/hash of attributes that are exposed to accept data from the parent component. It has an Array-based simple syntax and an alternative Object-based syntax that allows advanced configurations such as type checking, custom validation and default values. + En lista/hashtabell (TRANSLATE?) av attribut som exponeras för att acceptera data från föräldrakomponenten. Den har en enkel array-baserad (TRANSLATE!) syntax och en alternativ objekt-baserad syntax som möjliggör avancerad konfiguration så som typkontroll, anpassade valideringar och standardvärden. - With Object-based syntax, you can use following options: - - `type`: can be one of the following native constructors: `String`, `Number`, `Boolean`, `Array`, `Object`, `Date`, `Function`, `Symbol`, any custom constructor function or an array of those. Will check if a prop has a given type, and will throw a warning if it doesn't. [More information](../guide/components-props.html#Prop-Types) on prop types. + Med den objekt-baserade syntaxen kan du använda följande alternativ: + - `type`: kan vara en av följande nativkonstruktörer (TRANSLATE!): `String`, `Number`, `Boolean`, `Array`, `Object`, `Date`, `Function`, `Symbol`, anpassad konstruktörfunktion eller en array (TRANSLATE!) av dem. Kommer kontrollera om en prop har den givna typen och kastar annars en varning om den ej har det. [Mer information](../guide/components-props.html#Prop-Types) om prop-typer (TRANSLATE!). - `default`: `any` - Specifies a default value for the prop. If the prop is not passed, this value will be used instead. Object or array defaults must be returned from a factory function. + Definierar ett standardvärde för prop (TRANSLATE!). Om denna prop (TRANSLATE!) inte har skickats kommer detta värdet att användas instället. Standardvärden som är objekt eller array måste returneras från en fabriksfunktion. - `required`: `Boolean` - Defines if the prop is required. In a non-production environment, a console warning will be thrown if this value is truthy and the prop is not passed. + Definierar ifrall prop (TRANSLATE!) är obligatorisk. I ett icke-produktionsläge kommer en konsollvarning kastas om detta värdet är sant och prop:en (TRANSLATE!) inte har skickats. - `validator`: `Function` - Custom validator function that takes the prop value as the sole argument. In a non-production environment, a console warning will be thrown if this function returns a falsy value (i.e. the validation fails). You can read more about prop validation [here](../guide/components-props.html#Prop-Validation). + Anpassad valideringsfuktion som tar prop-värdet (TRANSLATE!) som enda argument. I ett icke-produktionsläge kommer en konsolvarning kastas om denna funktion returnerar ett falskt värde (t.ex. ifall valideringen misslyckats). Du kan läsa mera om propvalidering (TRANSLATE!) [här](../guide/components-props.html#Prop-Validation). -- **Example:** +- **Exempel:** ``` js - // simple syntax + // simpel syntax Vue.component('props-demo-simple', { props: ['size', 'myMessage'] }) - // object syntax with validation + // objektsyntax med objektvalidering Vue.component('props-demo-advanced', { props: { - // type check + // typkontroll height: Number, - // type check plus other validations + // typkontroll och flera valideringar age: { type: Number, default: 0, @@ -544,19 +546,19 @@ type: api }) ``` -- **See also:** [Props](../guide/components-props.html) +- **Läs även:** [Props](../guide/components-props.html) ### propsData -- **Type:** `{ [key: string]: any }` +- **Typ:** `{ [key: string]: any }` -- **Restriction:** only respected in instance creation via `new`. +- **Restriktion:** respekteras endast då en instans skapas med `new`. -- **Details:** +- **Detaljer:** - Pass props to an instance during its creation. This is primarily intended to make unit testing easier. + Skicka props (TRANSLATE!) till en instans då den skapas. Detta är främst avsett för att göra enhetstestning enklare. -- **Example:** +- **Exempel:** ``` js var Comp = Vue.extend({ @@ -573,13 +575,13 @@ type: api ### computed -- **Type:** `{ [key: string]: Function | { get: Function, set: Function } }` +- **Typ:** `{ [key: string]: Function | { get: Function, set: Function } }` -- **Details:** +- **Detaljer:** - Computed properties to be mixed into the Vue instance. All getters and setters have their `this` context automatically bound to the Vue instance. + Computed properties (beräknade egenskaper) (TRANSLATE?) som kommer bli inkluderade i Vue-instansen. Alla getters och setters har sin `this`-kontext automatiskt bundna till Vue-instansen. - Note that if you use an arrow function with a computed property, `this` won't be the component's instance, but you can still access the instance as the function's first argument: + Notera att ifall du använder en pilfunktion i en computed property (TRANSLATE!) kommer `this` inte vara komponentinstansen, men du kan fortfarande nå instansen genom funktionens första argument: ```js computed: { @@ -587,19 +589,19 @@ type: api } ``` - Computed properties are cached, and only re-computed on reactive dependency changes. Note that if a certain dependency is out of the instance's scope (i.e. not reactive), the computed property will __not__ be updated. + Computed properties (TRANSLATE!) är cachade och återberäknas endast vid reaktiva beroendeförändringar. Notera att ifall ett specifikt beroende är utanför instansräckvidden (t.ex. inte reaktiv) kommer computed property:en (TRANSLATE?) __inte__ bli uppdaterad. -- **Example:** +- **Exempel:** ```js var vm = new Vue({ data: { a: 1 }, computed: { - // get only + // endast get aDouble: function () { return this.a * 2 }, - // both get and set + // både get och set aPlus: { get: function () { return this.a + 1 @@ -616,19 +618,19 @@ type: api vm.aDouble // => 4 ``` -- **See also:** [Computed Properties](../guide/computed.html) +- **Läs även:** [Computed Properties (TRANSLATE!)](../guide/computed.html) ### methods -- **Type:** `{ [key: string]: Function }` +- **Typ:** `{ [key: string]: Function }` -- **Details:** +- **Detaljer:** - Methods to be mixed into the Vue instance. You can access these methods directly on the VM instance, or use them in directive expressions. All methods will have their `this` context automatically bound to the Vue instance. + Metoder som kommer bli inkluderade i Vue-instansen. Du kan nå dessa metoder direkt på VM-instansen, eller använda dem i direktivuttryck. Alla metoder kommer automatiskt att ha sin `this`-kontext bundna till Vue-instansen. -

Note that __you should not use an arrow function to define a method__ (e.g. `plus: () => this.a++`). The reason is arrow functions bind the parent context, so `this` will not be the Vue instance as you expect and `this.a` will be undefined.

+

Notera att __du ej bör använda en pilfunktion då du definierar en metod__ (t.ex. `plus: () => this.a++`). Orsaken är att pilfunktioner binder föräldrakontexten, så `this` kommer inte vara Vue-instansen och `this.a` kommer vara odefinierat.

-- **Example:** +- **Exempel:** ```js var vm = new Vue({ @@ -643,17 +645,17 @@ type: api vm.a // 2 ``` -- **See also:** [Event Handling](../guide/events.html) +- **Läs även:** [Händelsehantering](../guide/events.html) ### watch -- **Type:** `{ [key: string]: string | Function | Object | Array}` +- **Typ:** `{ [key: string]: string | Function | Object | Array}` -- **Details:** +- **Detaljer:** - An object where keys are expressions to watch and values are the corresponding callbacks. The value can also be a string of a method name, or an Object that contains additional options. The Vue instance will call `$watch()` for each entry in the object at instantiation. + Ett objekt där nycklar (TRANSLATE?) är uttryck som skall bevakas och värden är motsvarande callbacks (TRANSLATE!). Värdena kan även vara en textsträng till ett metodnamn eller ett objekt som innehåller ytterligare alternativ. Vue-instansen anropar `$watch()` för varje element i objektet vid instansiering. -- **Example:** +- **Exempel:** ``` js var vm = new Vue({ @@ -672,14 +674,14 @@ type: api a: function (val, oldVal) { console.log('new: %s, old: %s', val, oldVal) }, - // string method name + // metodnamn som en textsträng b: 'someMethod', - // the callback will be called whenever any of the watched object properties change regardless of their nested depth + // callback (TRANSLATE!) anropas varje gång någon av de bevakade objektegenskaperna ändras, oavsett deras kapslade djup c: { handler: function (val, oldVal) { /* ... */ }, deep: true }, - // the callback will be called immediately after the start of the observation + // callback (TRANSLATE!) anropas genast då bevakningen startar d: { handler: 'someMethod', immediate: true @@ -692,86 +694,86 @@ type: api /* ... */ } ], - // watch vm.e.f's value: {g: 5} + // bevaka vm.e.f's värde: {g: 5} 'e.f': function (val, oldVal) { /* ... */ } } }) - vm.a = 2 // => new: 2, old: 1 + vm.a = 2 // => ny: 2, gammal: 1 ``` -

Note that __you should not use an arrow function to define a watcher__ (e.g. `searchQuery: newValue => this.updateAutocomplete(newValue)`). The reason is arrow functions bind the parent context, so `this` will not be the Vue instance as you expect and `this.updateAutocomplete` will be undefined.

+

Notera att __du ej bör använda en pilfunktion då du definierar en watcher (TRANSLATE!)__ (t.ex. `searchQuery: newValue => this.updateAutocomplete(newValue)`). Orsaken är att pilfunktioner binder föräldrakontexten, så `this` kommer inte vara Vue-instansen och `this.updateAutocomplete` kommer vara odefinierat.

-- **See also:** [Instance Methods / Data - vm.$watch](#vm-watch) +- **Läs även:** [Instansmetoder / Data - vm.$watch](#vm-watch) -## Options / DOM +## Alternativ / DOM ### el -- **Type:** `string | Element` +- **Typ:** `string | Element` -- **Restriction:** only respected in instance creation via `new`. +- **Restriktion:** respekteras endast då en instans skapas med `new`. -- **Details:** +- **Detaljer:** - Provide the Vue instance an existing DOM element to mount on. It can be a CSS selector string or an actual HTMLElement. + Förse Vue-instansen med ett existerande element att montera sig på. Detta kan vara en CSS selektor-textsträng eller ett HTMLElement. - After the instance is mounted, the resolved element will be accessible as `vm.$el`. + Efter att instansen har monterats kan det valda elementet nås med `vm.$el`. - If this option is available at instantiation, the instance will immediately enter compilation; otherwise, the user will have to explicitly call `vm.$mount()` to manually start the compilation. + Om detta alternativet existerar vid instansiering kommer instansen att genast starta kompilering; annars måste användaren anropa `vm.$mount()` för att manuellt starta kompileringen. -

The provided element merely serves as a mounting point. Unlike in Vue 1.x, the mounted element will be replaced with Vue-generated DOM in all cases. It is therefore not recommended to mount the root instance to `` or ``.

+

Det försedda elementet fungerar endast som en monteringpunkt. Till skillnad från Vue 1.x kommer elementet att ersättas med Vue-genererad DOM i alla tillfällen. Det rekommenderas därför ej att montera toppinstansen på `` eller ``.

-

If neither `render` function nor `template` option is present, the in-DOM HTML of the mounting DOM element will be extracted as the template. In this case, Runtime + Compiler build of Vue should be used.

+

Om varken en `render`-funktion eller ett `template`-alternativ existerar kommer HTML i DOM av monteringselementet att exraheras som template (mall) (TRANSLATE!). I dessa tillfällen borde runtime + kompilator-utgåvan (TRANSLATE?) av Vue användas.

-- **See also:** - - [Lifecycle Diagram](../guide/instance.html#Lifecycle-Diagram) - - [Runtime + Compiler vs. Runtime-only](../guide/installation.html#Runtime-Compiler-vs-Runtime-only) +- **Läs även:** + - [Lifecycle-diagram (TRANSLATE?)](../guide/instance.html#Lifecycle-Diagram) + - [Runtime + kompilator vs. endast runtime](../guide/installation.html#Runtime-Compiler-vs-Runtime-only) ### template -- **Type:** `string` +- **Typ:** `string` -- **Details:** +- **Detaljer:** - A string template to be used as the markup for the Vue instance. The template will **replace** the mounted element. Any existing markup inside the mounted element will be ignored, unless content distribution slots are present in the template. + En template (mall) (TRANSLATE?) i textsträngformat att användas som markup för Vue-instansen. Denna template (TRANSLATE!) kommer **ersätta** det monterade elementet. All existerande markup i det monterade elementet kommer bli ignorerat, såvida inte innehållsdistribuerande slots existerar i template (TRANSLATE!). - If the string starts with `#` it will be used as a querySelector and use the selected element's innerHTML as the template string. This allows the use of the common `